CSS box-shadowジェネレーター
CSSのbox-shadowを視覚的に作成します。複数レイヤーの重ね、オフセット、ぼかし、広がり、inset、RGBAの不透明度に対応し、ライブプレビューで見ながらコードをコピーできます。
プリセット
レイヤー
プレビュー設定
プレビュー
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
関連ツール
すべて表示CSS box-shadowジェネレーターとは？
CSSの box-shadow プロパティを視覚的に編集するツールです。複数の影のレイヤーを重ね、それぞれにオフセット、ぼかし、広がり、色、不透明度、insetフラグを設定でき、サンプルのボックスで結果を確認しながら、対応するCSSが書き出されます。
CSS box-shadowジェネレーターの使い方
- プリセット（ソフト、重ね影、ハード、グロー、内側、リング）を選ぶか、既定の影から始めます。
- レイヤーを選び、水平オフセット、垂直オフセット、ぼかし、広がり、影の色、不透明度を調整します。内側の影にするには内側（inset）にチェックを入れます。
- レイヤーを追加 / レイヤーを削除で多重の影を作ります。レイヤーは描画順に並びます。
- プレビュー設定で背景、要素の色、半径を変えて、影の見え方を確認します。
- 生成されたCSSコードをコピーします。
例
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
CSS box-shadowジェネレーターを使うべき場面
HTML要素のカードの浮き上がり、フォーカスリング、グロー、内側の影のデザインに使います。テキストの影にはText Shadow Generatorを、透過PNGやクリップされた要素の形に沿う影には、box-shadowが常に要素のボーダーボックスに沿うため、代わりに filter: drop-shadow()（CSS Filter Generator）を使ってください。
CSS box-shadowジェネレーターの仕組み
各レイヤーは、[inset] x y blur spread color の順で1つの box-shadow の値になります。長さはpxで書かれます（0は単位なしの 0）。不透明度スライダーは色自体のアルファに掛け合わされ、完全に不透明な色はhex、半透明の色は rgba(r, g, b, a) で書かれます。複数のレイヤーは1行に1つずつカンマで連結され、最初のレイヤーが一番上に描画されます。ぼかしは負にできませんが、広がりは負にできます。
一般的な使用例
- カードやモーダル向けの、マテリアル風の重ね影による浮き上がり
- 広がりだけの影（0 0 0 3px）による、アクセシブルなフォーカスリング
- 押下状態のボタンや入力欄の内側の影
- 行動喚起ボタンの周りの色付きグロー
- ネオブルータリズムのデザイン向けの、ハードなオフセットの影
よくある質問
複数の影はどの順序で描画されますか。
リストの最初の影が一番上に、最後の影が一番下に描画されます。ツールは、レイヤーパネルに表示されている順序でレイヤーを書き出します。
ぼかしと広がりの違いは何ですか。
ぼかしは影の縁をやわらかくします（負にはできません）。広がりは、ぼかす前に影を拡大または縮小します。負の広がりにすると、影は要素より小さくなります。
-webkit-box-shadowはまだ必要ですか。
いいえ。プレフィックスなしの box-shadow は10年以上前からすべてのブラウザが対応しているため、ツールは標準のプロパティだけを出力します。
透過画像の周りに影が表示されないのはなぜですか。
box-shadowは、見えているピクセルではなく、要素の矩形のボックス（border-radiusを含む）に沿います。その場合は filter: drop-shadow() を使ってください。