CSS Reference

drop-shadow()

ドロップシャドウ効果を与える

drop-shadow() 関数は、フィルター関数と呼ばれるCSS関数で、filter プロパティを使用して要素にドロップシャドウ効果を与えることができます。

基本的には box-shadow プロパティと同様の形式で引数を指定しますが、box-shadow プロパティが、要素のボックスに対して、四角形のドロップシャドウ（影）を描写するのに対し、drop-shadow() 関数を画像に適用した場合、そのアルファチャンネルの形状に沿った形でドロップシャドウを描写します。複雑な形状の画像自体にドロップシャドウを描写したい場合は、drop-shadow() 関数を使用すると便利です。

drop-shadow() 関数の基本的な構文は下記のようになります。

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

box-shadow プロパティとの違いは、3番目の引数です。box-shadow プロパティが border-radius （影の角の丸み）であるのに対して、drop-shadow() 関数は blur-radius （影のぼかし半径）となる点です。

offset-x および offset-y

X 軸（水平）方向、および Y 軸（垂直）方向のオフセットです。<length> 値で指定します。省略された場合はすべて 0 となります。

offset-x に正の値（例えば 2px や 1.25rem など）を指定すると、右方向にオフセットしていきます。負の値（例えば -2px や -1.25rem など）の場合は左方向にオフセットします。

offset-y に正の値を指定すると、下方向にオフセットしていきます。負の値の場合は上方向にオフセットします。

blur-radius

ドロップシャドウをぼかす半径です。<length> 値で指定します。省略された場合は 0 となり、ぼかしは行われません。

color

ドロップシャドウの色を指定します。<color> 値で指定します。

色が指定されていない場合は、当該要素に対して color プロパティで指定されている色が使用されます。

drop-shadow()のサンプルソース

filter: drop-shadow(16px 16px 10px black);
filter: drop-shadow(0 -6em 4rem rgb(160, 0, 210));

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome