CSS drop-shadow() 関数

定義と使用方法

CSSの drop-shadow() フィルタ関数は画像に投影効果を適用します。

画像に異なる投影効果を追加します：

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

画像に異なる投影効果を追加します（負の値の水平と垂直影を使用）：

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

値	説明
h-shadow	必須。水平影のピクセル値を指定します。負の値は影を画像の左側に配置します。
v-shadow	必須。垂直影のピクセル値を指定します。負の値は影を画像の上に配置します。
blur	オプション。影にぼかし効果を追加します、単位はピクセルです。値が大きいほど、ぼかし効果が強くなります（影がより大きく薄くなります）。負の値は使用できません。値が指定されていない場合、デフォルトは 0（影のエッジがはっきりしています）です。
spread	オプション。ピクセル値で指定する必要があります。正の値は影を拡張し大きくし、負の値は影を縮小します。指定されていない場合、デフォルトは 0（影は要素の大きさと同じです）です。
color	オプション。影に色を追加します。指定されていない場合、色はブラウザに依存します（通常は黒です）。

バージョン：	CSS Filter Effects Module Level 1

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
18	12	35	6	15