概要

text-shadow プロパティは、テキストに影を追加します。要素のテキストと text-decoration に適用する影効果をカンマ区切りのリストとして指定できます。

それぞれの影はテキストに対するオフセットとして指定され、加えて任意で色とぼかしの半径を指定できます。

複数の影は手前から奥に適用され、最初に指定された影が上にきます・

このプロパティは ::first-line::first-letter のどちらの擬似要素にも適用されます。

初期値none
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値色、続けて絶対的な長さ 3 つ
アニメーションの可否可。 の値として補完しますshadow リスト
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 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
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

<color>
任意。オフセット値の前か後に指定できます。色が指定されなければ、UA が選んだ色が使われます。
註: ブラウザ間での一貫性を確保したい場合は、明示的に色を指定してください
<offset-x> <offset-y>
必須。これらの <length> 値はテキストに対する影のオフセットを指定します。<offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの背後に配置されます(もし <blur-radius> が設定されていれば、ぼかし効果が生成されるでしょう)。
取りうる単位は <length> を参照。
<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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

.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 veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.white-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
<p class="white-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 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.gold-on-gold {
   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
   color: gold;
   background: gold;
}
<p class="gold-on-gold">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

仕様

仕様書 策定状況 コメント
CSS Transitions
text-shadow の定義
草案 text-shadow をアニメーション可能と記述。
CSS Text Decoration Level 3
text-shadow の定義
勧告候補 CSS プロパティ text-shadowCSS2 で不適切に定義され、CSS2 (Level 1) で削除されました。CSS Text Module Level 3 仕様で構文を改善しました。その後新しい草案 CSS Text Decoration Module Level 3 に移動しました。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 2.0.158.0 3.5 (1.9.1)[1] 10[3] 9.5[2] 1.1 (100)[4]
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

[1] Gecko (Firefox) は理論上は無限個の影をサポートしています(試さないでください)。Gecko 2 以降はパフォーマンス上の理由からぼかしの半径を 300 に制限しています。<color> 値が無指定なら、Gecko は要素の color プロパティの値を使います。

[2] Opera はパフォーマンス上の理由から最大 6-9 個の text-shadows をサポートしています。ぼかしの半径は 100px までです。Opera 9.5-10.1 は古い(CSS2での、最初に定義された影がにくる)逆順の描画順序に固執しています。

[3] Internet Explorer 5.5 は Microsoft の Shadow and DropShadow Filter をサポートしています。

[4] Safari: 明示的に色を指定しない影はすべて透明になります。Safari 1.1-3.2 がサポートする text-shadow は 1 つだけです(カンマ区切りのリスト内の最初の影を表示し、残りは無視します)。 Safari 4.0 (WebKit 528) 以降は複数の text-shadow をサポートしています。Konqueror は text-shadow を バージョン 3.4 からサポートし始めました。

関連情報

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

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