drop-shadow()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

drop-shadow() は CSS の関数で、入力画像にドロップシャドウ効果を適用します。結果は <filter-function> です。

ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。

メモ: この関数はいくらか box-shadow プロパティと似ています。 box-shadow プロパティは要素のボックス全体の背後に長方形の影を作成しますが、 drop-shadow() フィルター関数は画像自体の形 (アルファチャネル) に合った影を作成します。

css

drop-shadow(offset-x offset-y blur-radius color)

drop-shadow() 関数は <shadow> 型の引数 (box-shadow プロパティで定義) を受け付けますが、 inset キーワードと spread 引数が許可されないという例外があります。

offset-x offset-y (必須): 影のオフセットを指定する 2 つの <length> 値です。 offset-x は水平方向の距離を表し、負の数で影を要素の左方に配置します。 offset-y は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も 0 であれば、影は要素の真後ろに配置されます。
blur-radius (任意): 影をぼかす半径で、 <length> で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の 0 になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。
color (任意): 影の色で、 <color> で指定します。指定されなかった場合は、 color プロパティの値が使用されます。

css

/* 10px のぼかしで広がりのない黒い影 */
drop-shadow(16px 16px 10px black)

css

/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */
drop-shadow(.5rem .5rem 1rem #e23)

Specification
Filter Effects Module Level 1 # funcdef-filter-drop-shadow

BCD tables only load in the browser