カードやダイアログの影を設計
プレビューを見ながらオフセット、ぼかし、広がり、不透明度を調整し、UI要素用のCSSを作れます。
CSSボックスシャドウ生成
CSSボックスシャドウ生成
オフセット、ぼかし、広がり、色、不透明度、内側シャドウを視覚的に調整し、重ねたCSS box-shadowを作成します。
主な機能
- X・Yオフセットを-100〜100px、ぼかしを0〜200px、広がりを-100〜100pxで調整します。
- HEX色と0〜1のアルファ値をrgba()出力へ変換します。
- 各レイヤーで外側・内側シャドウを個別に設定します。
- レイヤーを追加・削除し、ライブプレビューからカンマ区切りのbox-shadow宣言をコピーできます。
使い方
- 最初のレイヤーのオフセット、ぼかし、広がり、色を調整します。
- 必要に応じてinsetを有効にするか、シャドウレイヤーを追加します。
- プレビューを確認し、生成されたCSS宣言をコピーします。
活用例
複数の影で奥行きを表現
複数の外側・insetレイヤーを組み合わせ、1つのbox-shadow宣言としてコピーできます。
プライバシー
シャドウ設定とCSS生成はブラウザ内で処理されます。
よくある質問
- 複数のシャドウを重ねられますか？
- はい。レイヤーを追加すると、各設定をカンマで連結した1つのbox-shadow宣言が生成されます。
- 内側のシャドウも作れますか？
- はい。各レイヤーでinsetを有効にし、外側のレイヤーとは別に内側のシャドウを設定できます。
関連ツール
- 線形・放射CSSグラデーション生成線形・放射グラデーションの方向、形、カラーストップ、位置を視覚的に編集し、background CSSをコピーします。
- カラーピッカー | 画像・画面から色を取得HEX、RGB、HSLを相互変換し、アップロード・貼り付け画像のピクセルや対応ブラウザの画面から色を取得します。
- CSS cubic-bezierイージング生成2つの制御点をドラッグしてCSSアニメーションやトランジションのcubic-bezier曲線を作り、動きをプレビューします。
- WCAGカラーコントラスト確認前景色と背景色のHEXからWCAG 2.xのコントラスト比を計算し、通常・大きな文字のAA・AAA適合を確認します。