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> です。

試してみましょう

filter: drop-shadow(30px 10px 4px #4444dd);

filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));

filter: drop-shadow(0 0 0.75rem crimson);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

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

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

構文

css
/* 2 つの長さの値 */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)

/* 3 つの長さの値 */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)

/* 2 つの長さの値と色 */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)

/* 3 つの長さの値と色 */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)

/* 色と長さの値の順序は変更可能 */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#e23 0.5rem 0.5rem 1rem)

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

引数

<color> 省略可

影の色で、 <color> で指定します。指定されなかった場合は、 color プロパティの値が使用されます。

<length>

影をずらす長さを指定します。この引数は 2 つまたは 3 つの値を受け入れます。 2 つの値が指定された場合、それらは <offset-x> （水平方向のオフセット）と <offset-y> （垂直方向のオフセット）の値として解釈されます。 <offset-x> の値が負の場合、影は要素の左側に作成されます。 <offset-y> の値が負の場合、影は要素の上側に作成されます。指定されていない場合、値 0 が不足している長さとして使用されます。 3 つ目の値を指定すると、ガウスぼかし関数の標準偏差の値である <standard-deviation> として解釈されます。 <standard-deviation> の値が大きくなると、より大きく不鮮明な影を作成します。 <standard-deviation> に負の値を指定することはできません。

形式文法

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )

例

ドロップシャドウの設定

html
<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
css
div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -6px red);
}

<color> 値が最初のボックスの drop-shadow() 関数に指定されていない場合、影は要素の color プロパティの値 (lime) を使用します。 2 つ目と 3 つ目の影は、長さと色の値を任意の順序で指定できることを示しています。 3 つ目の影は、 3 つ目の <length> 値が指定された場合の不鮮明な効果を示しています。 4 つ目の影は、負のオフセットを使用しており、影を左と上に移動させています。

仕様書

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

ブラウザーの互換性

関連情報