text-shadow

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

構文

/* 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
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
計算値色、続けて絶対的な長さ 3 つ
アニメーションの種類a 影のリスト

形式文法

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>

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 3
text-shadow の定義		 勧告候補 CSS プロパティ text-shadow は CSS2 で不適切に定義され、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 CSS Text Decoration Module Level 3 に移動しました。

ブラウザーの互換性

BCD tables only load in the browser

Quantum CSS のメモ

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

関連情報