定義と使い方

box-shadowプロパティは、要素のボックスに影の効果を適用するプロパティです。

  • このプロパティの特徴および実装方法、
  • 特に、複数の影を適用する方法について解説します。
  • そして、さまざまな例を通して box-shadow を効果的に活用する方法について見ていきましょう。

基本例

CSS ライブデモ：box-shadow デモボタンをクリックしてみてください！

テキストの文字に影の効果を適用するには、text-shadowプロパティを使用してください。

形式構文

CSS 
selector {
    box-shadow: /* 値 */
}

構文

CSS 
/*
 * <offset-x>（必須）：x軸（水平方向）の距離（正の数、0、負の数が指定可能）。長さの単位（%は使用不可）
 * <offset-y>（必須）：y軸（垂直方向）の距離（正의数、0、負の数が指定可能）。長さの単位（%は使用不可）
 * <blur-radius>（オプション）：ぼかし効果。ぼかしの強さを円の半径として測定（正の数、0のみ。負の数は不可）。
 * 初期値は0。長さの単位（%は使用不可）
 * <spread-radius>（オプション）：影の拡大と縮小（正の数、0、負の数が指定可能）。
 * 正の値は影を拡大して大きくし、負の値は影を縮小
 * <color>（オプション）：影の色。初期値はcurrentcolor（現在の文字色）
 * <inset>（オプション）：影をボックスの外側から内側に変更
 */

/* 注意！ <offset-x> と <offset-y> の間に <blur-radius> や <color> を置くことはできません。 */
/* 注意！ <blur-radius> は必ず <offset-y> の直後に指定する必要があります。 */
/* 注意！ <spread-radius> は必ず <blur-radius> の直後に指定する必要があります。 */
/* 注意！ <color> は <offset-x>、<offset-y>、<blur-radius>、<spread-radius> の間に置くことはできません。 */
/* 注意！ <inset> は <offset-x>、<offset-y>、<blur-radius>、<spread-radius> の間に置くことはできません Red。 */

/* <offset-x> | <offset-y> | <blur-radius> | <color> */
box-shadow: 2px 3px 4px red;

/* <offset-x> | <offset-y> | <blur-radius> | <spread-radius> | <color> */
box-shadow: 2px 3px 4px 5px red;

/* <color> | <offset-x> | <offset-y> | <blur-radius> */
box-shadow: red 2px 0 4px;

/* <color> | <offset-x> | <offset-y> | <blur-radius> | <spread-radius> */
box-shadow: red 2px 0 4px 6px;

/* <offset-x> | <offset-y> | <color> */
box-shadow: 5px 5px #00a0e9;

/* <color> | <offset-x> | <offset-y> */
box-shadow: green 2px 5px;

/* <inset> | <offset-x> | <offset-y> | <blur-radius> | <color> */
box-shadow: inset 2px 3px 4px red;

/* <offset-x> | <offset-y> | <blur-radius> | <color> | <inset> */
box-shadow: 2px 3px 4px red inset;

/* <offset-x> | <offset-y>
   <color>、<blur-radius>、<spread-radius> は初期値が適用されます */
box-shadow: 5px 10px;

/* 複数の影を指定する場合は、値をカンマ（,）で区切って追加します。
   影は記述した順に前面から背面へと重なり、最初の影が一番上に表示されます。 */
box-shadow: red 2px 0 4px, blue 4px 0 4px, green 6px 8px;

/* 初期値 */
box-shadow: none; /* 影の効果がないことを意味します */

/* グローバル値 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

値

box-shadowプロパティの値
none 初期値です。
影の効果はありません。
<color> 任意。
影の色を指定する値です。
初期値は currentcolor（現在の文字色）です。この値は <offset-x>、<offset-y>、<blur-radius>、<spread-radius> の間に置くことはできません。
<offset-x> <offset-y> 必須。
これらの長さの値は、要素のボックスからの影の距離を指定します。
  • <offset-x>は、水平方向の距離を指定します。負の値を指定すると、要素のボックスの左側に影が配置されます。
  • <offset-y>는、垂直方向の距離を指定します。負の値を指定すると、要素のボックスの上に影가配置されます。
<offset-x>と<offset-y>は半角スペースで区切り、これらの間には<color>、<blur-radius>、<spread-radius>、<inset>を置くことはできません。また、これら2つの値には%単位の長さを使用することはできません。
<blur-radius> 任意。
ぼかし効果を指定します。ぼかしの大きさは円の半径として測定され、値が大きくなるほどぼかし効果が強くなります。つまり、影がより広く、淡くなります。負の値や % 単位の長さを使用することはできません。
初期値は 0 です。この値は必ず <offset-y> の直後に指定する必要があります。
<spread-radius> 任意。
影の拡大と縮小を指定します。
正の値は影を拡散させてより大きくし、負の値は影を縮小させます。初期値は 0 です。この値は必ず <blur-radius> の直後に指定する必要があります。
box-shadow の <spread-radius> 値の活用チップをチェックしてみてください！
<inset> 任意。
影をボックスの外側の影から内側の影へと変更します。
この値が指定されていない場合は、ボックスの外側の影として描画されます。この値は <offset-x>、<offset-y>、<blur-radius>、<spread-radius> の間に置くことはできません。

形式定義

box-shadowプロパティの形式の定義
初期値 none
長さの値におけるパーセンテージ（%）単位の使用 該当なし
適用対象 すべての要素
継承 いいえ
アニメーション <inset>を除いた
<offset-x>、<offset-y>、<blur-radius>、<spread-radius>、<color>

box-shadowプロパティの特徴

box-shadowプロパティには、以下のような特徴があります。

  1. text-shadowとは異なり、影の形状が切り取られます。
  2. text-shadowと同様に、レイアウトに影響を与えません。
  3. border-radiusの影響を受けます。

これら3つの特徴について、詳しく見ていきましょう。

text-shadowとは異なり、影の形状が切り取られます。

text-shadowはテキストの影の形状が切り取られませんが、box-shadowは要素ボックスの形状で影が切り取られます。

次の実装例で確認してみましょう。

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: rgba(0, 0, 0, 0.4);
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">テキスト</p>
実際の適用例

上の実装例を見ると、text-shadowは影の形状で切り取られず、テキストが透明または半透明の場合、影が透けて見えることがわかります。

しかし、次の実装例を見ると、ボックスを透明に指定して透けて見える box-shadowの影の形状が、ボックスの形状で切り取られていることがわかります。

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: transparent;
        box-shadow: 10px 10px 10px yellowgreen;
    }
</style>
<div class="box">BOX</div>
実際の適用例

text-shadowと同様に、レイアウトに影響を与えません。

text-shadowや box-shadowは、影が大きくて周辺要素に重なったりはみ出したりしても、レイアウトに影響を与えません。これはオーバーフロー（overflow、境界を越えること）しても、スクロールに影響を与えません。

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        margin: 0;
    }
    .text-2 {
        margin: 0;
        text-shadow: 0 -50px 10px rgba(0, 0, 0, 0.4);
    }
</style>
<p class="text text-1">テキスト 1</p>
<p class="text text-2">テキスト 2</p>
実際の適用例

上の実装例を見ると、.text-2のtext-shadow が上にある .text-1 にはみ出して描画されていますが、.text-1 や .text-2 が押し出されたり隙間が空いたりするなどの現象は発生していません。text-shadow は、周囲のレイアウトに影響を与えません。

以下の実装例でも、box-shadowが text-shadowと同様に、周囲のレイアウトに影響を与えないことを示しています。

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: gold;
    }
    .box-1 {
        margin-bottom: 25px;
    }
    .box-2 {
        box-shadow: 0 -50px 20px rgba(0, 0, 0, 0.7);
    }
</style>
<div class="box box-1">BOX 1</div>
<div class="box box-2">BOX 2</div>
実際の適用例

border-radiusの影響を受けます。

box-shadowは該当する要素ボックスのborder-radiusの影響を受け、丸くクリッピングされます。影の形状は、丸く切り取られた要素の境界線に従うことになります。

HTML 
<style>
    .box {
        width: 200px;
        height: 100px;
        border-radius: 20px;
        background-color: gold;
        box-shadow: 10px 10px 15px;
    }
</style>
<div class="box"></div>
実際の適用例

上の実装例を見ると、要素ボックスに border-radius: 20px を指定し、要素ボックスの各コーナーに 20px ずつ角丸の効果を与えています。このとき、各コーナーにbox-shadowで指定した影のエフェクトにも、角丸の効果が適用されていることがわかります。これは、insetを使用して影のエフェクトをボックスの内側の影として指定した場合も、同様に適用されます。

box-shadowにはtext-shadowにはない<spread-radius>値がオプションとしてあり、影を拡大または縮小することができます。
<spread-radius>値が正の数であれば影を拡張してより大きくし、負の数値は影を縮小します。それでは、<spread-radius>値はどこに活用するのでしょうか？

一見するとあまり活用価値がないように見えますが、この値を負の数として適用して影を縮小すれば、審美的に影のスタイルをより良く整えることができます。

次の活用例で確認してみましょう。

HTML 
<style>
    .box {
        max-width: 250px;
        height: 200px;
        border-radius: 15px;
        background-color: white;
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
        transition: box-shadow 0.2s;
    }
    .box:hover {
        box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    }
</style>
<div class="box"></div>
実際の適用例 要素ボックスにマウスを乗せてみてください！

上の例は、<spread-radius>値に負の数値を指定して、審美的に影のスタイルをより良く整える代表的な事例です。

box-shadowで複数の影のエフェクトを付ける

box-shadowプロパティで複数の影のエフェクトを付けるには、値をコンマ(,)で区切って追加することができます。影のエフェクトは順番通りに前から後ろへと適用され、最初の影が一番上にきます。

HTML 
<style>
    .box {
        max-width: 250px;
        height: 200px;
        border-radius: 15px;
        border: 1px solid;
        background-color: white;
        box-shadow: 7px 7px red,
                     14px 14px green,
                     21px 21px blue;
    }
</style>
<div class="box"></div>
実際の適用例

上の実装例を見ると、影のエフェクトが順番に red、green、blue の順で前から後ろへと適用され、最初の影であるredが一番上にきます。

ブラウザ互換性

box-shadow プロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
box-shadow 10 12 4 5.1

仕様書

box-shadowプロパティに関する仕様書
仕様書
box-shadow CSS Backgrounds and Borders Module Level 3
#box-shadow

参考資料

関連項目