CSS の text-shadow プロパティはテキストに影を追加します。文字列及びその装飾に適用される影のコンマで区切られたリストを受け付けます。それぞれの影は、要素からの 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 | <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 Transitions
text-shadow の定義
草案 text-shadow をアニメーション可能と指定。
CSS Text Decoration Module Level 3
text-shadow の定義
勧告候補 CSS プロパティ text-shadowCSS2 で不適切に定義され、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 CSS Text Decoration Module Level 3 に移動しました。

初期値none
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値色、続けて絶対的な長さ 3 つ
アニメーションの種類a 影のリスト
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 2Edge 完全対応 12Firefox 完全対応 3.5
補足
完全対応 3.5
補足
補足 Firefox versions before 57 have a bug whereby transitions will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (bug 726550).
補足 From Firefox 4, the blur radius is capped at 300 for performance reasons.
補足 Firefox theoretically supports infinite text-shadows (don't try it).
補足 If the <color> value is unspecified, then Firefox uses the value of the element's color property.
IE 完全対応 10Opera 完全対応 9.5
補足
完全対応 9.5
補足
補足 Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
補足 Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom).
Safari 完全対応 1.1
補足
完全対応 1.1
補足
補足 In Safari, any shadows that do not explicitly specify a color are transparent.
補足 Safari 1.1 to 3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari 4.0 (WebKit 528) and later support multiple text-shadows.
WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

Quantum CSS のメモ

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Prinz_Rana, mitsuba-clover, Sebastianz, ethertank, sosleepy, Taken
最終更新者: mfuji09,