【CSS】画像の外側 / 内側に影をつける方法

2023年7月24日

box-shadowプロパティを使って、画像の外側に影を付けて浮かび上がったように見せたり、逆に内側に影を付けて中心にフォーカスさせたように見せたりする方法を紹介します。

自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！

box-shadowプロパティについて

セレクター { 
  box-shadow: 10px 20px black;
}

最初の2つの数値で、影の位置（上下・左右）を指定します。
- 上のコードでは、「10px下・20px右」に影を配置します。
- 数値をマイナスにすると、上および左方向に影を配置します。
位置指定後は影の色を指定します。
- 上のコードでは、影の色を「black（黒）」にします。
- rgbaで指定することもでき、透明感を出したい場合はこちらを使います。
  例）box-shadow: 10px 20px rgba(0, 0, 0, 0.5); → 半透明＆黒の影をつけます。
影にぼかしを加えることもできます。

「box-shadow」の具体的な使い方については、本記事の後半に纏めています。

実装例とコード

影なし

外側に影を付ける

最近よく用いられるスタイルで、少し浮かび上がったような印象になります。

内側に影を付ける

画像中心にフォーカスを当てたような印象になります。

<!-- srcの値は表示したい画像を指定してください。 -->
<img src="">

img {
  box-shadow: 0 0 30px black;
}

影は画像と同じ位置（0 0）に配置します。
このままで影が画像と被ってしまって見えないのですが、ぼかしを加えることで画像の外側に向かって影が伸びて見えるようになります。

実装例のぼかしは30pxとしていますが、数値を増減させることで影の広がり具合を調整できます。
影の色が濃すぎる場合は、rgbaで色を指定することで透明度を調整できます。

影の色を黒＆半透明にする場合：box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);

<div class="container">
  <div class="inset">
    <!-- srcの値は表示したい画像を指定してください。 -->
    <img src="">
  </div>
</div>

.container {
  position: relative;
  z-index: 0;
}

.inset {
  box-shadow: inset 0 0 50px black;
}

img {
  position: relative;
  z-index: -1;
}

画像の内側に影を付ける場合、対象の要素自体にbox-shadowをセットしても反映されません。（影が画像の裏側にセットされてしまうため。）

これを解決するには、上記コードのようにz-indexプロパティを使用し、画像を影の裏側に配置します。また、z-indexはpositonプロパティとセットで使わないと反映されません。

上記コードのように、

を設定することで、画像の内側に影を付けることができます。

上述の通り、特定の要素に影を付けるにはbox-shadowプロパティを使用します。
以下のような値を指定することで、影の位置 / 影の大きさ / 影の濃さなどを自由に調節できます。

セレクター {
  background: skyblue;
  box-shadow: 10px 10px black;
}

下に10px、右に10pxずれた位置に影を付けるプロパティです。

セレクター {
  background: skyblue;
  box-shadow: -10px -10px black;
}

上に10px、左に10pxずれた位置に影を付けるプロパティです。

セレクター {
  background: lime;
  box-shadow: 10px 10px 10px black;
}

10pxのぼかしを加えたパターンです。（3つ目の数値でぼかし具合を調整できます。）

セレクター {
  background: lime;
  box-shadow: 10px 10px 30px black;
}

30pxのぼかしを加えたパターンです。（3つ目の数値でぼかし具合を調整できます。）

セレクター {
  background: lime;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}

10pxのぼかしに透明度（0.5）を加えたパターンです。（影の色をrgba()で指定します。）

セレクター {
  background: lime;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.5);
}

30pxのぼかしに透明度（0.5）を加えたパターンです。（影の色をrgba()で指定します。）

セレクター {
  background: magenta;
  box-shadow: 0px 0px 30px black;
}

要素の外側全体に影を付け、浮かび上がったような見た目にするCSSです。

セレクター {
  background: magenta;
  box-shadow: inset 0 0 30px black;
}

要素の内側に影を付ける場合、最初の値に「inset」を記述します。

以上、box-shadowプロパティを使った影の付け方について紹介しました。

外側に影を付ける場合は簡単ですが、画像の内側に影を付ける場合はz-indexを使う必要があり、慣れていないとちょっとややこしく感じると思います。

実装の際は、要素を弄ってみてどのように表示されるか試してみると、より理解が深まると思います。

よかったらシェアしてね！