text-shadow

CSS の text-shadow プロパティはテキストに影を追加します。文字列及びその装飾に適用される影のコンマで区切られたリストを受け付けます。それぞれの影は、要素からの X 及び Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。

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

構文

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* color 及び blur-radius は既定値を使用 */
text-shadow: 5px 10px;

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

このプロパティは、影のコンマで区切られたリストとして指定します。

それぞれの影は2つ又は3つの <length> 値と、任意でその後に <color> 値を続けることで指定します。最初の2つの <length> 値は、 <offset-x> 及び <offset-y> の値です。3番目の <length> 値は、任意で、 <blur-radius> です。 <color> 値は影の色です。

複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。

このプロパティは ::first-line 及び ::first-letter の両方の疑似要素に適用されます。

値

<color>

省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。

<offset-x> <offset-y>

必須。これらの <length> 値はテキストに対する影のオフセットを指定します。 <offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの真後ろに配置されますが、 <blur-radius> の効果により一部だけが見えるかもしれません。

<blur-radius>

省略可。これは <length> 値です。指定されなければ、既定では 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

形式文法

none | <shadow-t>#
where 
<shadow-t> = [ <length>{2,3} && <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>

例

単純な影

.red-text-shadow {
  text-shadow: red 0 -2px;
}

<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

複数の影

.white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}

<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

仕様書

ブラウザーの互換性

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

Quantum CSS のメモ

• Gecko には transition にバグがあり、色が指定された text-shadow から色が指定されていない text-shadow への移行が動作しません (バグ 726550)。これは Firefox の新しいパラレル CSS エンジン (Quantum CSS 又は Stylo とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。

関連情報

• Text Shadow CSS Generator - 対話的な text shadow CSS 作成ツール。
• box-shadow
• <color> データ型 (影の色を指定するため)
• CSS を使った HTML の要素への色の適用