要素に影をつけるプロパティをまとめてみる

要素に影をつけるためのCSSプロパティは下記のようにいくつかありますが、それぞれに微妙な違いもあるので少しまとめてみたい。

・box-shadow
・filter: drop-shadow()
・text-shadow

1. box-shadow

• 要素（ボックス）に影をつけるプロパティです。

• 要素全体（幅や高さ）に影が付きます。

box-shadow: [水平距離] [垂直距離] [ぼかしの範囲] [広がり] [色];

/* 右下にぼんやりした黒い影 */
box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);

用途

• カードやボタンなどの立体感を出すためによく使います。

• 影の位置やぼかし具合を細かく調整できます。

2. filter: drop-shadow()

• 要素自体の形に基づいて影をつけます。

• 特に透明部分がある画像やSVGに影をつける場合に便利です。

• 透過部分を考慮するのが特徴です。

filter: drop-shadow([水平距離] [垂直距離] [ぼかしの範囲] [色]);

/* SVGアイコンに薄い影 */
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

用途

• アイコン、透過画像、SVGなどの影を自然に表現したい場合に使用します。

• 擬似要素に影をつけたい際も使用することができます。

3. text-shadow

• テキスト専用の影をつけるプロパティです。

• テキスト文字そのものに影がつきます。

text-shadow: [水平距離] [垂直距離] [ぼかしの範囲] [色];

/* 白い文字に薄い黒い影 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

用途

• タイトルやボタンの文字に影をつけて目立たせたいときに使用します。

• 少しぼかした影をつけることで、文字が浮き出て見えます。