CSSボックスシャドウ試行錯誤なしに現実的な結果を得る方法

掲載日 2026年5月2日

ボックスシャドウは、CSSプロパティの中でも、見た目はシンプルに見えるが、結果が2008年のクリップアートのように見えると、その仕組みが明らかでないものです。構文は短いですが、その

ボックスシャドウは、CSSプロパティの中でも、見た目はシンプルに見えるが、結果が2008年のクリップアートのように見えると、その仕組みが明らかでないものです。構文は短いですが、各値が実際にどのように動作するか、そしてそれらがどのように相互作用するかは明らかではありません。ここでは、考えられたように見えるシャドウを書く方法を紹介します。

構文の解説

box-shadow: offset-x offset-y blur-radius spread-radius color;

5つの値。それぞれについて正確に説明します。

offset-x：シャドウが水平方向にどれだけ押し出されているか。正の値は右に、負の値は左に移動します。
offset-y：シャドウが垂直方向にどれだけ押し出されているか。正の値は下に移動します。
blur-radius：シャドウを柔らかくします。 0、エッジが硬いです。値が高くなるほど、Gaussian blurがシャドウの形状に適用され、外側にぼかされます。
spread-radius：シャドウを拡大または収縮します レコードを確認してください。 ぼかしが適用される。正のspreadは要素よりも大きいものにし、負のspreadは小さいものにします。
color：シャドウの色。純黒を使うことが一般的な誤りです。
inset：オプションのキーワードで、シャドウを要素の内側に反転します。

ぼかしとスプレッド：影が不自然に見える原因

これら2つの値が「なぜこれがあまりにも不自然に見える」という状況の多くを引き起こします。

ぼかし シャドウを柔らかくします。光の拡散をシミュレートします — ソースから離れるほど、シャドウが広がります。小さな要素に対して blur-radius の 8px は大きな要素に対して非常に異なります。

スプレッド ベースのシャドウ形状を拡大または縮小します。もし「遠くにあり、柔らかい影」という印象を作りたい場合、ブラーを増加させながら負のスプレッドを減らすと、シャドウが要素の境界を越えて広がり、不自然に見えます。わずかな負のスプレッドを加えることで、その影が元の足跡から始まり、より自然な印象になります。

適切な組み合わせは、通常、中程度のブラーとゼロまたはわずかな負のスプレッドです。これは現実世界のシャドウの仕組みです — 距離が遠いほど柔らかくなりますが、物体の影を投げている範囲を超えて広がりません。

自然なシャドウの作り方

自然に見えるシャドウを作るための3つのルール

1. 純黒を使わない。 現実的なシャドウは周囲の色を吸収します。濃いネイビーまたは暖色の濃いグレーで 0.10–0.15 の透過度は、シャドウとして見えますが、スタンプされた形状のように見えません。最初の候補として rgba(0, 0, 0, 0.12) を試し、パレットに合わせて色をわずかに暖色または冷色に調整してください。

2. 1つの光源を一致させる。 影が異なる要素で異なる方向に伸びている場合、ページ全体が不一致に見えます。方向を1つ選んでください — 通常は正の offset-y (上からの光) — そして、システム全体でそれを維持してください。

3. 透過度を低く保つ。 透過度が100％のシャドウは、境界線として見えます。もし硬い境界線が明確に見える場合、透過度が高すぎたり、ブラーがゼロになっている可能性があります。現実に見えるシャドウは、体積を与えるだけで、境界線を示しません。

複数のシャドウを重ねて深さを表現する

CSSは、1つの要素にコンマで区切られた複数のシャドウレイヤーを許容しています。これにより、視覚的なアーティファクトなしに実際の深さを得られます。

1つの大きなシャドウではなく、2つのシャドウを試してください：接触部分に近い緊密なシャドウと、高さに応じた広範囲のシャドウです。

box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.06);

最初のレイヤーは要素の表面に接地し、2番目のレイヤーはそれが浮かんでいるように感じさせます。どちらのレイヤーも「シャドウ」として孤立していません — 一緒に組み合わさることで、深さの錯覚が生まれます。物理的に、これは近くにある強い光源が下に緊密な影を投げ、周囲の光がより柔らかいハローを広げることを模倣しています。

インセットシャドウ：光が反転するとき

の inset キーワードは、シャドウを要素の境界の内側に引き寄せます。主な用途は以下の通りです：

押されたボタン状態：浅いインセットシャドウが :active に設けられることで、実際のボタンクリックの物理的な感覚を再現します。
入力フィールドの深さ：フォーム入力やテキストエリアは表面からインセットされたように見え、上端のインセットシャドウを持つパターンです。これはスケューモーフィックデザインの時代に遡るが、今も明確に読み取りやすいものです。

/* Pressed button */
button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Input field depth */
input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

パフォーマンス：filter: drop-shadowを使用するタイミング

box-shadow は、常にをトリガーします — それは要素だけでなく、その下の描画レイヤーにも影響します。アニメーションやスクロールが多いUIでは、これは測定可能なコストを加えます。はGPUコンポーサー上で実行され、アニメーションされたシャドウには非常に安価です。また、要素の実際の描画形状（透明部分を含む）に従います。

filter: drop-shadow() は常にボックスモデルの矩形に従います。 box-shadow 実用的なルール：レイアウト要素の静的なシャドウには

を使用し、アニメーションされた要素やSVGで、シャドウが視覚的な形状に従う必要がある場合は box-shadow を使用してください。 filter: drop-shadow デザインシステムにおけるシャドウトークン

各コンポーネントごとにシャドウ値をハードコードすることは、不整合を引き起こします。一度に小さなセットのエレベーショントークンを定義し、あらゆる場所で参照してください。

各トークンは2層アプローチを使用します：接触のための緊密なシャドウと、エレベーションのための広範囲のシャドウです。ブラーと透過度は、エレベーションが高くなるにつれて増加します — 距離が遠いほど、シャドウは柔らかくなり、広がります。

:root {
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.04);

  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.06);

  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);

  --shadow-xl:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06);

  --shadow-2xl:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.08);
}

これらの値は白または淡いグレーの背景でよく機能します。暗い背景では、論理を逆転させます — インセットシャドウは明るく半透明の色を使用し、キャストシャドウは暗い色にします。

推測を避けましょう

シャドウ値を調整している場合 — 特に複数のシャドウを重ねたり、異なる透過度をテストしている場合 — リアルタイムプレビューは非常に多くの時間を節約します。IO Toolsの

では、すべての6つのパラメータをリアルタイムで調整でき、複数のシャドウレイヤーをスタックでき、生成されたCSSをコピーできます。新しいデザイントークンを調整する場合や、プロダクションに導入する前にシャドウが正しく読めるかを検証する際に役立ちます。 CSSボックスシャドウジェネレーターシャドウが設計されたように見えるか、または貼り付けられたように見えるかの違いは、通常、3つの要素に帰着します：低い透過度、純黒以外の色、そしてブラーがスプレッドが本来すべきことではない仕事をするようにする。

CSSボックスシャドウ：試行錯誤なしに現実的な結果を得る方法2