CSS text-shadow property

text-shadowは、HTMLのテキストに影を描くCSSプロパティです。このページでは、text-shadowプロパティの使い方とサンプルをご紹介します。

構文

text-shadow: none
text-shadow: color horizontal vertical radius
text-shadow: color horizontal vertical
text-shadow: horizontal vertical radius color
text-shadow: horizontal vertical color
text-shadow: horizontal vertical radius
text-shadow: horizontal vertical
none
テキストに影を付けない。
<p style="text-shadow: none">none</p>

none

color
影の色を指定する。影の色を省略すると、黒い影が描かれる。
<p style="text-shadow: black 2px 2px">black</p>
<p style="text-shadow: gray 2px 2px">gray</p>
<p style="text-shadow: silver 2px 2px">gray</p>
black
gray
silver
horizontal
水平方向のオフセットを指定する。水平方向のオフセットは要素の幅に影響を与えないため、左右の要素に影が被ることがある。
<p style="text-shadow: silver 1px 0">1px</p>
<p style="text-shadow: silver 2px 0">2px</p>
<p style="text-shadow: silver 4px 0">4px</p>
1px
2px
4px
vertical
垂直方向のオフセットを指定する。垂直方向のオフセットは要素の高さに影響を与えないため、上下の要素に影が被ることがある。
<p style="text-shadow: silver 0 1px">1px</p>
<p style="text-shadow: silver 0 2px">2px</p>
<p style="text-shadow: silver 0 4px">4px</p>
1px
2px
4px
radius
ぼかし半径を指定する。ぼかし半径を省略すると、影をぼかさない。
<p style="text-shadow: silver 4px 4px 1px">1px</p>
<p style="text-shadow: silver 4px 4px 2px">2px</p>
<p style="text-shadow: silver 4px 4px 4px">4px</p>
1px
2px
4px

初期値

text-shadow プロパティの初期値は none である。text-shadow プロパティが指定されていないテキストに影は付かない。

適用対象

テキストに対して text-shadow プロパティが適用される。

継承

親要素に対して指定した text-shadow プロパティは、その子孫の要素へ継承される。

<div style="text-shadow: silver 4px 4px 1px; font-size: large">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>いろはにほへと</p>
</div>

The quick brown fox jumps over the lazy dog.

いろはにほへと

関連記事

参考文献

World Wide Web Consortium (2022) CSS Text Decoration Module Level 3