定義と使い方

text-shadowプロパティは、テキストの文字に影の効果（Shadow Effect）を適用するプロパティです。

  • このプロパティの特徴および実装方法、
  • 特に複数を使用する方法について説明します。
  • そして、多様な例題を通じて text-shadow を効果的に活用する方法を見ていきましょう。

基本例

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

要素ボックスに影の効果を適用するにはbox-shadowプロパティを使用してください。

形式構文

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

構文

CSS 
/*
 * <offset-x>（必須）：x軸（横方向）の距離（正の数、0、負の数が指定可能）。長さの値（%単位の使用は不可）
 * <offset-y>（必須）：y軸（縦方向）の距離（正의 数、0、負の数が指定可能）。長さの値（%単位の使用は不可）
 * <blur-radius>（任意）：ぼかし効果。大きさの基準はぼかし効果を円の半径として測定（正の数、0のみ。負の数は不可）。
 * 初期値は 0。長さの値（%単位の使用は不可）
 * <color>（任意）：影の色。初期値は currentcolor（現在の文字色）
 */

/* 注意！ <offset-x> と <offset-y> の間に <blur-radius> や <color> を配置することはできません。 */
/* 注意！ <blur-radius> は必ず <offset-y> の直後に指定しなければなりません。 */
/* 注意！ <color> は <offset-x>、<offset-y>、<blur-radius> の間に配置することはできません。 */

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

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

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

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

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

/* 複数の影の効果は値をカンマ（,）で区切って追加します。
    影の効果は記述した順に前面から背面へと適用されます。最初の影が最前面に表示されます。 */
text-shadow: red 2px 0 4px, blue 4px 0 4px, green 6px 8px;

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

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

値

text-shadowプロパティの値
none 初期値です。
影の効果はありません。
<color> 任意。
影の色です。
初期値は currentcolor （現在の文字色）です。プロパティ値の最前部または最後部に指定できます。
<offset-x> <offset-y> 必須。
これらの長さの値は、テキストからの影の距離を指定します。
  • <offset-x> は横軸の水平距離を指定します。負の値はテキストの左側に影を配置します。
  • <offset-y> は縦軸の垂直距離を指定します。負の値은はテキストの上に影를を配置します。
<offset-x> と <offset-y> は半角スペースで区切り、この間には <color> や <blur-radius> を配置することはできません。これら2つの長さの値には % 単位の長さの値を使用することはできません。
<blur-radius> 任意。
ぼかし効果を指定します。大きさの基準はぼかし効果を円の半径として測定し、値が大きくなるほどぼかし効果が強くなります。つまり、影がより広がり、淡くなります。負の値や % 単位の長さの値を使用することはできません。
初期値は 0 です。
この値は必ず <offset-y> の直後に指定しなければなりません。

形式定義

text-shadowプロパティの形式の定義
初期値 none
長さの値におけるパーセンテージ（%）単位の使用 該当なし
適用対象 すべての要素
継承 はい
アニメーション はい

text-shadow プロパティの特徴

text-shadow プロパティには次のような特徴があります。

  1. box-shadowとは異なり、影の形が切り取られることはありません。
  2. box-shadowと同様に、レイアウトに影響を与えません。
  3. text-decoration に影の効果を与えます。
  4. text-emphasis に影の効果を与えます。

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

box-shadow とは異なり、影の形が切り取られることはありません。

box-shadowは要素ボックスの形で影が切り取られますが、text-shadow は影の形で切り取られることはなく、テキストが透明または部分的に透明な場合には透けて見えることがあります。

次の実装例で見ていきましょう。

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

上の実装例を見ると、要素ボックスを透明に指定して透けて見えているbox-shadowの影の形が、ボックスの形で切り取られていることがわかります。しかし、次の実装例を見ると、text-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>
実際の適用例

box-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>
実際の適用例

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

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

HTML 
<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
    }
    .text-1 {
        margin-bottom: 10px;
    }
    .text-2 {
        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-decorationに影の効果を与えます。

text-shadow は text-decoration に影響を与えます。

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

上の実装例を見ると、テキストに text-decoration: underline を指定した場合、text-shadow で影の効果を与えると underline にも影の効果が適用されることがわかります。これは、すべての text-decoration-style の値においても同様に適用されます。

text-emphasisに影の効果を与えます。

text-shadow は text-emphasis に影響を与えます。

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

上の実装例を見ると、テキストに text-emphasis: dot を指定した場合、text-shadow で影の効果を与えると dot にも影の効果が適用されることがわかります。これは、すべての text-emphasis-style の値においても同様に適用されます。

text-shadow で複数の影の効果を与える

text-shadow 속성으로 여러 개의 그림자 효과를 주려면 값을 콤마(,)로 구분해서 추가할 수 있습니다.
그림자 효과는 순서대로 앞에서 뒤로 적용되며, 첫 번째 그림자가 맨 위에 옵니다.

HTML 
<style>
    .text {
        font-size: 100px;
        font-weight: 900;
        color: gold;
        text-shadow: 7px 7px red,
                     14px 14px green,
                     21px 21px blue;
    }
</style>
<p class="text">あ</p>
実際の適用例

上の実装例を見ると、影の効果が順番に red、green、blue と前から後ろへと適用され、最初の影である red が一番上に配置されます。

ブラウザ互換性

text-shadowプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
text-shadow 2 12 3.5 1.1

仕様書

text-shadowプロパティに関する仕様書
仕様書
text-shadow CSS Text Decoration Module Level 4
#text-shadow-property

参考資料

関連項目