CSS の box-shadow プロパティは、要素のフレームにドロップシャドウ効果を与えます。コンマで区切ることで、複数の効果を指定することができます。ボックスの影は要素からの相対的な X 及び Y のオフセット、ぼかしと拡散の半径、色で記述します。

box-shadow プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 border-radius が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数のテキストの影の場合と同様になります (最初に指定された影が最も手前に来ます)。

Box-shadow generator は、 box-shadow を対話的に作成できるツールです。

構文

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* 複数の影はコンマで区切る */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* グローバルキーワード */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

単一の box-shadow の使用を指定してみます。

  • 2つ、3つ、4つの <length>
    • 値が2つだけ与えられた場合、 <offset-x><offset-y> として解釈されます。
    • 値が3つ与えられた場合、 <blur-radius> として解釈されます。
    • 値が4つ与えられた場合、 <spread-radius> として解釈されます。
  • 任意で、 inset キーワード
  • 任意で、 <color> の値

複数の影を指定するには、影をコンマで区切ったリストを提供します。

inset
指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
inset キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 inset な影は背景の上、境界や内容の下に描画されます。
<offset-x> <offset-y>
これら2つの <length> 値は、影のオフセットを設定します。 <offset-x> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <offset-y> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については <length> をご覧ください。
どちらのオフセットも 0 である場合、影は要素の裏に配置されます。 (<blur-radius><spread-radius> が指定されている場合は、ぼかし効果が与えられるでしょう。)
<blur-radius>
これは3番目の <length> 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は 0 となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。
…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
<spread-radius>
4 番目に指定された <length> の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は 0 と解釈され、影の大きさは要素の大きさと同じままとなります。
<color>
可能なキーワード及び記述方法については <color> の値をご覧ください。
値が指定されていない場合の挙動はブラウザーによって異なります。 - ふつうはcolor プロパティの色が使われますが、なお、この場合 Safari では現在のところ影が透明になります。

補間

リストの中 (none は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、及び (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし inset が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で insetinset の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は transparent の色の影で補完し、すべての長さが 0 であり、 inset (の有無) が一致するものがあれば、より長いリストに一致します。

形式文法

none | <shadow>#

where
<shadow> = inset? && <length>{2,4} && <color>?

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
box-shadow の定義
勧告候補 初回定義

初期値none
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
メディア視覚
計算値指定値(length は全て絶対値となり、color については計算値となる)
アニメーションの種類a 影のリスト
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

101

1 -webkit-

12

41

3.5 — 13 -moz-

49 -webkit-

44 -webkit- 2

93 410.51

5.11

3 -webkit-

Multiple shadows

10

1 -webkit-

12

4

3.5 — 13 -moz-

9310.5

5.1

3 -webkit-

inset

10

1 -webkit-

12

4

3.5 — 13 -moz-

9310.5

5.1

5 -webkit-

Spread radius

10

1 -webkit-

12

4

3.5 — 13 -moz-

9310.5

5.1

5 -webkit-

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり -webkit- 1 ? あり ? あり1

51

あり -webkit-

?
Multiple shadows あり -webkit- ? あり ? あり

5

あり -webkit-

?
inset あり -webkit- ? あり ? あり

5

あり -webkit-

?
Spread radius あり -webkit- ? あり ? あり

5

あり -webkit-

?

1. Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.

4. Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3)

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, Prinz_Rana, ethertank, torinome, myakura
最終更新者: mfuji09,