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 の使用を指定してみます。

  • 二つ、三つ、四つの <length>
    • 値が二つだけ与えられた場合、 <offset-x><offset-y> として解釈されます。
    • 値が三つ与えられた場合、 <blur-radius> として解釈されます。
    • 値が四つ与えられた場合、 <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 影のリスト
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 10
補足
完全対応 10
補足
補足 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.
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 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.
未対応 3.5 — 13
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
IE 完全対応 9
補足
完全対応 9
補足
補足 To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
補足 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)
Opera 完全対応 10.5
補足
完全対応 10.5
補足
補足 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.
Safari 完全対応 5.1
補足
完全対応 5.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.
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 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.
Safari iOS 完全対応 5
補足
完全対応 5
補足
補足 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.
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
Multiple shadowsChrome 完全対応 10
完全対応 10
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 4
完全対応 4
未対応 3.5 — 13
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 9
補足
完全対応 9
補足
補足 To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera 完全対応 10.5Safari 完全対応 5.1
完全対応 5.1
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android 完全対応 ありSafari iOS 完全対応 5
完全対応 5
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
insetChrome 完全対応 10
完全対応 10
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 4
完全対応 4
未対応 3.5 — 13
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 部分対応 9
補足
部分対応 9
補足
補足 To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
補足 inset must be the last keyword in the declaration.
Opera 完全対応 10.5Safari 完全対応 5.1
完全対応 5.1
完全対応 5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android 完全対応 ありSafari iOS 完全対応 5
完全対応 5
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
Spread radiusChrome 完全対応 10
完全対応 10
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 4
完全対応 4
未対応 3.5 — 13
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 9
補足
完全対応 9
補足
補足 To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera 完全対応 10.5Safari 完全対応 5.1
完全対応 5.1
完全対応 5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android 完全対応 ありSafari iOS 完全対応 5
完全対応 5
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?

凡例

完全対応  
完全対応
部分対応  
部分対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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