影をレイヤーごとに組み立てる
このbox-shadowジェネレーターは、CSSの<code>box-shadow</code>プロパティを自動で書き出します。影のレイヤーを必要なだけ重ね、それぞれの水平・垂直オフセット、ぼかし、広がり、色、不透明度を調整し、内側の影（inset）に切り替えて、任意の背景の上でプレビューボックスが更新される様子を確認できます。ソフトな影、Material風のエレベーション、ニューモーフィズム、くっきりしたオフセット、グローといったプリセットから始めて、CSSやTailwindの<code>shadow-[…]</code>クラスをコピーしましょう。既存の影を貼り付けて編集することもできます。すべてブラウザー内で動作します。
CSSのbox-shadowを作る方法
- 1イメージに近いプリセットを選ぶか、デフォルトの重ねた影のまま始めます。
- 2レイヤーを選び、X・Yオフセット、ぼかし、広がり、色、不透明度を設定します。Insetをオンにすると、ボックスの内側に影を描きます。
- 3レイヤーを追加、複製、並べ替え、非表示を使って複数の影を組み合わせます。
- 4プレビューの背景、ボックスの色、角の丸み、サイズをデザインに合わせて変更します。
- 5CSSまたはTailwindクラスをコピーします。
box-shadowの値の意味
- オフセットXとY
- 影を右と下にどれだけずらすか。負の値なら左と上にずれます。光源がページの上にあるなら、Yオフセットは正の値になります。
- ぼかし半径
- 縁のやわらかさ。0ではボックスのくっきりしたコピーになり、値を大きくするほど影がより広く薄く広がります。負の値にはできません。
- 広がり半径
- ぼかす前に影を拡大・縮小します。大きなぼかしに負の広がりを組み合わせると、やわらかい影が側面からはみ出さず、多くの「ソフトな」影はこの工夫で作られています。
- 色
- 通常は黒か背景の暗い色を低い不透明度で使います。背景の色味を影に加えると、純粋なグレーより自然に見えます。
- inset
- 影を枠線の外側ではなく内側に描き、ボックスがへこんだように見せます。insetの影と外側の影は1つの宣言の中で混在できます。
なぜ影を何層も重ねるのか
実際の影には、物体が面にほぼ触れている部分の暗く締まった本影と、その外側に広がるやわらかい半影があります。box-shadowのレイヤー1つでは、そのどちらかしか描けません。オフセットとぼかしを倍々にした2〜5枚のレイヤーをそれぞれ低い不透明度で重ねると、モダンなデザインシステムで使われるなめらかでリアルな奥行きが生まれます。なめらかな重ね影プリセットがまさにそれです。
レイヤーは手前から奥へ描画され、リストの最初のレイヤーが一番上になります。矢印ボタンで並べ替え、目のアイコンでレイヤーを非表示にすると、そのレイヤーの効果を確認できます。非表示のレイヤーはコピーされるCSSに含まれません。
エレベーション、ニューモーフィズムなどのスタイル
エレベーション1〜5のプリセットは、Material Designの定番カードの影に沿っています。各レベルは環境光の影とキーライトの影を組み合わせ、レベルが上がるほどカードがページから浮き上がります。
ニューモーフィズムは、背景と同じ色のボックスに2つの影を使います。右下にずらした暗い影と、左上にずらした明るい影です。ボックスと背景の色が同じでないと成り立たないため、プリセットは両方の色を設定します。くっきりオフセットはぼかしを完全になくしたフラットでブルータリストな見た目、グローはオフセットゼロの色付きの影で、フォーカスリングや暗い背景でのネオン効果に使えます。
Tailwind CSSでのbox-shadow
Tailwind標準のshadow-sm〜shadow-2xlで一般的なケースはカバーできます。それ以外は、ジェネレーターがshadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]のような任意値を書き出します。クラス名にスペースは使えないため、スペースはアンダースコアに置き換えられます。このクラスは設定を編集しなくてもTailwind 3と4で動作します。
CSSグラデーション作成ツールで作った背景と影を組み合わせたり、コントラストチェッカーでカード上の文字が読みやすいか確認したりしましょう。
影とパフォーマンス
大きなぼかし半径は現在のすべてのブラウザーでGPUが描画するため、静的な要素なら負荷はわずかです。ただしbox-shadowをアニメーションさせると、フレームごとに要素が再描画されます。ホバー時に奥行きをアニメーションさせたいなら、大きいほうの影を疑似要素に置き、そのopacityをアニメーションさせましょう。
よくある質問
- box-shadowの書き方は？
- box-shadow: [inset] offset-x offset-y [blur] [spread] 色;。必須なのは2つのオフセットだけです。複数の影はカンマで区切ります。例：box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);。
- やわらかく控えめな影を作るには？
- 低い不透明度（10〜20%）の黒、大きなぼかし、小さなYオフセット、負の広がりを使います。たとえば0 10px 30px -5px rgba(0,0,0,0.15)です。このような影を2〜3枚重ねると、さらになめらかになります。
- 片側だけに影をつけるには？
- 影をその方向にずらし、ぼかしと同じくらいの負の広がりを指定して、ほかの辺から影が見えないようにします。たとえば下だけの影なら0 8px 6px -6px rgba(0,0,0,0.3)です。
- insetは何をするものですか？
- insetは影をボックスの後ろではなく内側に描き、要素がページにへこんでいるように見せます。入力欄や押された状態のボタンでよく使われます。
- box-shadowとdrop-shadowの違いは？
- box-shadowは要素のボックスと角の丸みに沿います。filter: drop-shadow()関数は、透過PNGやSVGアイコンの輪郭など実際に見えているピクセルに沿いますが、広がりやinsetはありません。
- Tailwindで独自のbox-shadowを使うには？
- ジェネレーターからshadow-[0_4px_12px_rgba(0,0,0,0.15)]のような任意値のTailwindクラスをコピーし、要素に追加します。テーマのboxShadow設定にCSSの値を登録して名前を付けることもできます。
- 手持ちの影を編集できますか？
- はい。box-shadowの値、宣言全体、またはTailwindのshadow-[…]クラスを「インポート」に貼り付けてください。remやemの長さは16pxとして換算されます。
- CSSはどこかに送信されますか？
- いいえ。ジェネレーターは完全にブラウザー内で動作します。