box-shadow

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

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

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>

これら２つの <length> 値は、影のオフセットを設定します。 <offset-x> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <offset-y> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については <length> をご覧ください。
どちらのオフセットも 0 である場合、影は要素の裏に配置されます。 (<blur-radius> や <spread-radius> が指定されている場合は、ぼかし効果が与えられるでしょう。)

<blur-radius>

これは３番目の <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 が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で inset と inset の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は 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>

例

• box-shadow test
• box-shadow tutorial and examples
• Box Shadow CSS Generator

仕様書

ブラウザーの対応

関連情報

• <color> データ型
• その他の色に関するプロパティ: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, caret-color, column-rule-color
• CSS を用いた HTML 要素への色の適用