ボックスシャドウジェネレーター
CSS box-shadowコードを視覚的に作成してコピーします。
環境
CSS出力
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
レイヤー 1
おすすめのツール
役に立つかもしれない厳選されたツール
CSSのボックスシャドウを視覚的にデザインする
概要
ボックスシャドウジェネレーターは、数値を当てずっぽうで書く代わりにスライダーをドラッグしてCSSのbox-shadowプロパティを作れます。影はボタン・カード・モーダルに奥行きと階層を加えますが、構文（オフセット・ぼかし・広がり・色・inset）は手書きが面倒です。このツールは各値を調整すると即座にプレビューを表示し、コピー用の正確なCSSを提供します。すべてブラウザ内で動作します。
使い方（ステップ）
- 1
スライダーを調整
ライブプレビューを見ながら水平・垂直オフセット、ぼかし、広がり、色を設定します。
- 2
必要なら影を重ねる
奥行きのため影のレイヤーを複数追加するか、insetをオンにして内側の影を作ります。
- 3
CSSをコピー
生成されたbox-shadow値を取得し、スタイルシートやコンポーネントに貼り付けます。
仕組み
box-shadowプロパティは水平・垂直オフセット、ぼかし半径、任意の広がり、色（通常は透明度付き）を受け取ります。各スライダーを動かすとプレビューが即時更新され、影の落ち方を正確に確認できます。ツールは複数の重ねた影を追加すればそれも含めて、対応するbox-shadow宣言を書き、スタイルシートに貼り付けられます。
こんなときに使う
カードやボタンをページから浮かせる控えめな影を加えるとき。デザイン案の影を目分量なしで合わせるとき。複数レイヤーを重ねた写実的な影を作るとき。押し込まれた・へこんだUI要素用のinset影を作るとき。ダーク・ライトテーマ向けに影の柔らかさと色を微調整するとき。各box-shadow値が結果にどう影響するか学ぶとき。
よくある質問
順に：水平オフセット、垂直オフセット、ぼかし半径、広がり。オフセットは影を動かし、ぼかしは縁を柔らかくし、広がりは大きさを増減します。続いて色が来て、控えめさのため通常は低い透明度のrgba()を使います。
注意事項
重い・多数のbox-shadowは、特にアニメーション時にレンダリング性能を損ないます。頻繁に動く・更新される要素では影を控えめに保ち、重ねるレイヤーを制限してください。