Webページをデザインするとき、「平坦な見た目から少しだけ立体感を出したいな」と感じたことはありませんか？
そんなときに便利なのが、CSSのbox-shadowプロパティです。
カードやボタンなどに影をつけることで、見た目に深みや奥行きを持たせることができます。

box-shadowとは？

box-shadowは、HTML要素に影（シャドウ）を加えるためのCSSプロパティです。
とくに、カードデザインやマテリアルデザイン、ホバーボタンの装飾などによく使われます。

基本構文と意味

box-shadowの書き方は次のようになります：

box-shadow: 水平距離 垂直距離 ぼかし 拡がり 色;

例えば、以下のように記述すると影が表示されます。

.box {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
}

各値の役割

• 5px（水平距離）：右方向に影をずらす距離
• 5px（垂直距離）：下方向に影をずらす距離
• 10px（ぼかし半径）：影のぼけ具合（大きいほど柔らかい影に）
• 0（拡がり）：影の広がり（数値が正なら拡大、負なら縮小）
• rgba(0, 0, 0, 0.3)：影の色と透明度

応用：複数の影を重ねる方法

box-shadowは1つだけでなく、カンマで区切って複数指定することも可能です。

.card {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2),
              0 8px 20px rgba(0, 0, 0, 0.1);
}

このようにすると、手前と奥に2種類の影が重なり、より自然な立体感を演出できます。

実用例：ボタンのホバー演出に活用

影の変化は、マウスホバー（hover）時のインタラクションとしてもよく使われます。

.button {
  background: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

ボタンに影をつけるだけで、クリックしたくなるような印象になります。

便利なテクニック：内側に影をつける（inset）

影を内側に表示するには、insetキーワードを使います。

.inner-shadow {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

内向きの影は、入力欄やパネル内の凹み表現などに便利です。

おわりに

box-shadowは、ちょっとしたCSSの工夫でWebデザインにプロっぽさを加えることができる便利なプロパティです。
初心者でも扱いやすく、ボタン・カード・メニューなど、あらゆる場面で活躍します。

次回は、text-shadowによる文字の影表現や、影を活用したアニメーションテクニックについてもご紹介します！