---
title: text-shadow
slug: Web/CSS/text-shadow
tags:
- CSS
- CSS Property
- CSS Styles
- CSS Text Decoration
- CSS スタイル
- CSS テキスト装飾
- CSS プロパティ
- HTML Colors
- HTML Styles
- HTML スタイル
- HTML 色
- Reference
- Styles
- Styling HTML
- color
- 'recipe:css-property'
- スタイル
translation_of: Web/CSS/text-shadow
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>text-shadow</code></strong> は CSS のプロパティで、テキストに影を追加します。文字列及びその<code><a href="/ja/docs/Web/CSS/text-decoration">装飾</a></code>に適用される影のカンマで区切られたリストを受け付けます。</span>それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。</p>
<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">/* 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;
</pre>
<p>このプロパティは、影のカンマで区切られたリストとして指定します。</p>
<p>それぞれの影は2つ又は3つの <code><length></code> 値と、任意でその後に <code><color></code> 値を続けることで指定します。最初の2つの <code><length></code> 値は、 <code><offset-x></code> 及び <code><offset-y></code> の値です。3番目の <code><length></code> 値は、任意で、 <code><blur-radius></code> です。 <code><color></code> 値は影の色です。</p>
<p>複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。</p>
<p>このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>に適用されます。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt>{{cssxref("<color>")}}</dt>
<dd>省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。</dd>
<dt><code><offset-x> <offset-y></code></dt>
<dd>必須。これらの <code><length></code> 値はテキストに対する影のオフセットを指定します。 <code><offset-x></code> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <code><offset-y></code> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が <code>0</code> ならば、影はテキストの真後ろに配置されますが、 <code><blur-radius></code> の効果により一部だけが見えるかもしれません。</dd>
<dt><code><blur-radius></code></dt>
<dd>省略可。これは {{ cssxref("<length>") }} 値です。指定されなければ、既定では <code>0</code> になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。</dd>
</dl>
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
<p>{{CSSInfo}}</p>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Simple_shadow" name="Simple_shadow">単純な影</h3>
<div>
<pre class="brush: css notranslate">.red-text-shadow {
text-shadow: red 0 -2px;
}</pre>
<pre class="brush: html notranslate"><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></pre>
</div>
<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
<h3 id="Multiple_shadows" name="Multiple_shadows">複数の影</h3>
<div>
<pre class="brush:css notranslate">.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;
}</pre>
<pre class="brush: html notranslate"><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></pre>
</div>
<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>CSS プロパティ <code>text-shadow</code> は <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">CSS2 で不適切に定義され</a>、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a> に移動しました。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("css.properties.text-shadow")}}</p>
<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
<ul>
<li>Gecko には {{cssxref("transition")}} にバグがあり、色が指定された <code>text-shadow</code> から色が指定されていない <code>text-shadow</code> への移行が動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> 又は <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。</li>
</ul>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{cssxref("box-shadow")}}</li>
<li>{{cssxref("<color>")}} データ型 (影の色を指定するため)</li>
<li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
</ul>