CSS box-shadow（ボックスシャドウ）の使い方を徹底解説！影エフェクトの基本から応用まで

CSSで要素をデザインしていると、要素の枠周りに影（シャドウ）効果を付けたくなることがあります。例えば、画像の下に影を落として、立体感や奥行きを演出したいケースなどが挙げられます。

そんなときに役立つのが、CSSの box-shadow プロパティです。このプロパティを使えば、要素の枠線の周囲に簡単に影効果を追加できます。本記事では、具体的なコード例とともに、box-shadow プロパティの基本的な使い方から応用テクニックまでをわかりやすく解説します。

CSS box-shadow（ボックスシャドウ）とは

box-shadow プロパティは、要素に影を追加するためのCSSプロパティです。ほぼすべてのHTML要素に適用でき、角丸（border-radius）を持つ要素にも使用できます。

基本構文

box-shadow プロパティの構文は以下の通りです。

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

それぞれの値の意味は次の通りです。

• offset-x：影の水平方向（X軸）のオフセット（必須）
• offset-y：影の垂直方向（Y軸）のオフセット（必須）
• blur-radius：影に加えるぼかしの半径（任意）
• spread：影の広がり半径（任意）
• color：影の色（任意・デフォルトは黒）

それでは、実際のコード例を見ながら使い方を確認していきましょう。以降の例では、次のHTML要素を使用します。

<div>
  <p>これはボックスです。</p>
</div>

この要素には、以下のようなスタイルを適用します。

div {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-color: lightblue;
}

このボックスは高さ100px、幅200pxで、内側に10pxのパディングが設定されています。つまり、ボックス内のテキストと境界線の間に10pxの余白がある状態です。背景色はライトブルー（水色）です。

水平・垂直方向の影

box-shadow プロパティで作成できる最も基本的な影は、水平・垂直方向にオフセットされた影です。以下は、ボックスに右下方向へ影を付けた例です。

div {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-color: lightblue;
  box-shadow: 10px 10px;
}

このコードでは、offset-x と offset-y の両方に「10px」を指定しています。その結果、黒い影がX軸・Y軸ともに10ピクセルずつずれた位置に表示されます。

影の色を指定する

影の色は、color値で自由に指定できます。例えば、影を薄いグレー（lightgray）にしたい場合は、次のように記述します。

div {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-color: lightblue;
  box-shadow: 10px 10px lightgray;
}

これで、ボックスの影が薄いグレーに変わります。

影のぼかし効果

blur-radius を指定すると、影にぼかし効果を加えられます。例えば、影に3pxのぼかしを付けて、少し柔らかい印象にしたい場合は、次のように書きます。

div {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-color: lightblue;
  box-shadow: 10px 10px 3px lightgray;
}

先ほどの例と似ていますが、よく見ると影の輪郭がわずかにぼやけているのがわかるでしょう。数値を大きくするほど、ぼかしは強くなります。

広がり（スプレッド）効果

box-shadow プロパティでは、spread（広がり半径）を指定することもできます。これは、影が全方向にどれだけ拡張されるかを定義する値です。例えば、影を周囲に5px広げたい場合は、次のように記述します。

div {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-color: lightblue;
  box-shadow: 10px 10px 5px 5px lightgray;
}

この例では、影が少し大きく表示されます。これは、spread-radius として5pxを指定したことで、影が全方向に5px拡張されているためです。

なお、このコードで指定した属性の順序は以下の通りです。

• offset-x（水平オフセット）
• offset-y（垂直オフセット）
• blur（ぼかし半径）
• spread（広がり半径）
• color（色）

複数の影を追加する

box-shadow プロパティは、1つの要素に複数の影を追加することもできます。複数の影を指定する場合は、カンマ（,）で区切って記述します。

box-shadow: shadow1, shadow2;

複数の影を使う際の注意点として、各影のオフセット値は異なるものにする必要があります。同じオフセット値を設定すると、影同士が重なり、最初に宣言された影しか表示されません。

例えば、ボックスの背後に薄いグレーとピンクの2つの影を付けたい場合は、次のように書きます。

div {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-color: lightblue;
  box-shadow: 5px 5px lightgray, 15px 15px pink;
}

このように記述すると、グレーの影とピンクの影が異なる位置に重なって表示され、より立体感のあるデザインになります。

内側の影（inset）

inset キーワードを使うと、影を要素の内側に表示させることができます。例えば、薄いグレーの影をボックスの内側に表示したい場合は、次のように記述します。

div {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-color: lightblue;
  box-shadow: 5px 5px lightgray inset;
}

inset キーワードにより、通常の外側の影が内側の影に変化します。押し込まれたような凹み表現など、さまざまなデザインに活用できます。

box-shadow の属性一覧

CSSの box-shadow プロパティで使える主な属性を、以下の表にまとめました。

まとめ

CSSの box-shadow プロパティを使うと、HTML要素に手軽に影効果を追加できます。

本記事では、具体的なコード例を交えながら、box-shadow プロパティによるカスタムシャドウの作成方法を解説しました。オフセット、ぼかし、広がり、色、insetなどを組み合わせることで、表現の幅は大きく広がります。ぜひこの記事を参考に、プロのWeb開発者のように自分だけのCSSシャドウを作ってみてください。