画像に影（シャドウ） デザイン見本
CSS の box-shadow プロパティで画像の外側・内側にシャドウを付ける実装デモ。コピーしてすぐ使えるコードを掲載しています。
① 外側に影を付ける — ぼかし量の変化
現在: box-shadow: none
<img src="画像のパス" alt="説明" class="shadow-img">.shadow-img {
box-shadow: none;
}box-shadow の最初の 2 つの数値は影の位置（右方向・下方向）を指定します。外側の影には位置を 0 0 にして、3 つ目の数値（ぼかし量）を大きくすると画像の外周に広がる影が現れます。影の色に rgba() を使うと透明度を調整でき、より自然なシャドウ表現が可能です。
② 影の方向を変える — X / Y オフセット
現在: box-shadow: 10px 10px 15px rgba(0,0,0,0.4)
<img src="画像のパス" alt="説明" class="shadow-img">.shadow-img {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4);
}1 つ目の数値（X）がプラスなら右、マイナスなら左に影がずれます。2 つ目の数値（Y）がプラスなら下、マイナスなら上にずれます。両方を 0 にすると上下左右均等に影が広がります。光源の方向を意識してオフセットを設定すると、より自然な立体感が生まれます。
③ 内側に影を付ける — inset と z-index
現在: box-shadow: inset 0 0 20px rgba(0,0,0,0.3)
<div class="container">
<div class="inset">
<img src="画像のパス" alt="説明">
</div>
</div>.container {
position: relative;
z-index: 0;
}
.inset {
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}
img {
position: relative;
z-index: -1;
display: block;
}box-shadow に inset を指定すると内側に影が入りますが、img 要素に直接適用しても影が画像の裏に隠れてしまいます。解決策は、画像の親要素に inset シャドウを付け、画像自体を z-index: -1 で親の後ろに配置することです。親に z-index: 0 と position: relative を組み合わせることで「影が前面、画像が後面」という重ね順が確定します。
④ 応用 — 複数シャドウの組み合わせ
ふわっと浮く
ネオングロー
積み重ね（3D）
<img src="画像のパス" alt="説明" class="shadow-float">
<img src="画像のパス" alt="説明" class="shadow-glow">
<img src="画像のパス" alt="説明" class="shadow-3d">.shadow-float {
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08),
0 10px 40px rgba(0, 0, 0, 0.25);
}
.shadow-glow {
box-shadow:
0 0 20px rgba(100, 180, 255, 0.7),
0 0 50px rgba(100, 180, 255, 0.3);
}
.shadow-3d {
box-shadow:
4px 4px 0 rgba(0, 0, 0, 0.15),
8px 8px 0 rgba(0, 0, 0, 0.1),
12px 12px 0 rgba(0, 0, 0, 0.06);
}box-shadow はカンマ区切りで複数の影を重ねて指定できます。近い影と遠い影を組み合わせることで自然な奥行き感が生まれます（ふわっと浮く）。色付きの光彩はアクセントカラーを rgba() で指定するだけで実現できます（ネオングロー）。ぼかし量を 0 にして複数ずらすと、積み重なった紙のような立体表現も可能です（積み重ね）。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
