drop-shadow()

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

構文

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

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

引数

offset-x offset-y (必須)

影のオフセットを指定する2つの <length> 値です。 offset-x は水平方向の距離を表し、負の数で影を要素の左方に配置します。 offset-y は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も 0 であれば、影は要素の真後ろに配置されます。

blur-radius (任意)

影をぼかす半径で、 <length> で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の 0 になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。

spread-radius (任意)

影が広がる半径を、 <length> で指定します。正の数ならば影が広く大きくなるのに対し、負の数ならば影が縮小します。指定されない場合は既定値の 0 となり、影は入力画像と同じ寸法になります。

大部分のブラウザーはこの引数に対応していません。使用すると、効果が表示されません。

color (任意)

影の色で、 <color> で指定します。指定されない場合の既定値は、ブラウザーによります。 Firefox 及び Internet Explorer color プロパティの値が使用されます。一方、 WebKit の影は既定で透明であり、この値を省略する使い方は限られています。

例

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

/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */
/* 警告: 一般にブラウザーで対応していません */
drop-shadow(.5rem .5rem 1rem .3rem #e23)

関連情報

• <filter-function>
• CSS の box-shadow プロパティ