簡単な例。

CSS : auto
.sample1  {
    text-shadow:    1px 1px 3px red;
}
.sample2  {
    text-shadow:    2px  1px 3px yellow,
                   -2px -1px 3px green;
}
.sample3  {  
    color:          white;
    font-weight:    bold;
    text-shadow:    1px 1px 1px black,
                    0   0   9px orangered;
}
HTML : 適用するHTML
<div class="sample1">sample1</div>
<div class="sample2">sample2</div>
<div class="sample3">sample3</div>
実行結果
sample1
sample2
sample3

このページで解説するコードの実行結果。

1+
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
1-
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
2+
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
2-
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
orangered
#ff8400
#fc0

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    font-size:          2em;            /*  文字の大きさ */
}

text-shadowの概要

文字列に影をつける。ボックスに影をつけるのはbox-shadowである。

CSSプロパティ影をつける対象
text-shadow文字列
box-shadowボックス

text-shadowには4つの引き数が必要である。第一~第三引き数は数値であり、第四引き数はカラーコードである。

引き数の順番設定値
1 ~ 3数値(+ 単位)
カラーコード

各引き数の設定する内容は以下。

引き数の順番設定する内容設定値
第一引き数横方向の位置数値(+ 単位)。 マイナス値も可。
第二引き数縦方向の位置数値(+ 単位)。 マイナス値も可。
第三引き数影の広がり数値(+ 単位)。
第四引き数影の色カラーコード。

または、順番を代えて、第一引き数をカラーコードにして、第二~第四引き数を数値にすることもできる。

引き数の順番設定値
カラーコード
2 ~ 4数値(+ 単位)
引き数の順番設定する内容設定値
第一引き数影の色カラーコード。
第二引き数横方向の位置数値(+ 単位)。 マイナス値も可。
第三引き数縦方向の位置数値(+ 単位)。 マイナス値も可。
第四引き数影の広がり数値(+ 単位)。

順番を変えた実験。

CSS : 設定の順番を変更
.sample1 {    text-shadow:    1px  2px 3px yellow;  }
.sample2 {    text-shadow:    yellow 1px  2px 3px ;  }
HTML : 適用するHTML
<div class="sample1"    >    .sample1   </div>
<div class="sample2"    >    .sample2   </div>
順番を変更した結果
.sample1
.sample2

ただし順番を代えるとややこしい、以下では「第一~第三引き数は数値、第四引き数はカラーコード」で説明する。

(1) 横方向の位置

第一引き数だけを変更してみる。 大きくなるにつれ、影が右にずれていく。

CSS : 第一引き数
.px0    { text-shadow:   0    0 2px orangered ; }
.px1    { text-shadow:   1px  0 2px orangered ; }
.px2    { text-shadow:   2px  0 2px orangered ; }
.px3    { text-shadow:   3px  0 2px orangered ; }
.px4    { text-shadow:   4px  0 2px orangered ; }
.px5    { text-shadow:   5px  0 2px orangered ; }
.px6    { text-shadow:   6px  0 2px orangered ; }
.px7    { text-shadow:   7px  0 2px orangered ; }
.px8    { text-shadow:   8px  0 2px orangered ; }
.px9    { text-shadow:   9px  0 2px orangered ; }
.px10   { text-shadow:   10px 0 2px orangered ; }
HTML : 適用するHTML
<div class="px0"    >0px</div>
<div class="px1"    >1px</div>
<div class="px2"    >2px</div>
<div class="px3"    >3px</div>
<div class="px4"    >4px</div>
<div class="px5"    >5px</div>
<div class="px6"    >6px</div>
<div class="px7"    >7px</div>
<div class="px8"    >8px</div>
<div class="px9"    >9px</div>
<div class="px10"   >10px</div>
実行結果
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

マイナス値も指定可能。マイナスにすると、右にずれていく。

CSS : マイナス値の指定
.px0    { text-shadow:    0    0 2px orangered ; }
.px1    { text-shadow:   -1px  0 2px orangered ; }
.px2    { text-shadow:   -2px  0 2px orangered ; }
.px3    { text-shadow:   -3px  0 2px orangered ; }
.px4    { text-shadow:   -4px  0 2px orangered ; }
.px5    { text-shadow:   -5px  0 2px orangered ; }
.px6    { text-shadow:   -6px  0 2px orangered ; }
.px7    { text-shadow:   -7px  0 2px orangered ; }
.px8    { text-shadow:   -8px  0 2px orangered ; }
.px9    { text-shadow:   -9px  0 2px orangered ; }
.px10   { text-shadow:   -10px 0 2px orangered ; }
実行結果
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

(2) 縦方向の位置

第二引き数だけを変更してみる。 大きくなるにつれ、影が下にずれていく。

CSS : 第二引き数
.px0    { text-shadow: 0 0    2px orangered ; }
.px1    { text-shadow: 0 1px  2px orangered ; }
.px2    { text-shadow: 0 2px  2px orangered ; }
.px3    { text-shadow: 0 3px  2px orangered ; }
.px4    { text-shadow: 0 4px  2px orangered ; }
.px5    { text-shadow: 0 5px  2px orangered ; }
.px6    { text-shadow: 0 6px  2px orangered ; }
.px7    { text-shadow: 0 7px  2px orangered ; }
.px8    { text-shadow: 0 8px  2px orangered ; }
.px9    { text-shadow: 0 9px  2px orangered ; }
.px10   { text-shadow: 0 10px 2px orangered ; }
実行結果
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

マイナス値も指定可能。マイナスにすると、上にずれていく。

CSS : マイナス値の指定
.px0    { text-shadow: 0  0    2px orangered ; }
.px1    { text-shadow: 0 -1px  2px orangered ; }
.px2    { text-shadow: 0 -2px  2px orangered ; }
.px3    { text-shadow: 0 -3px  2px orangered ; }
.px4    { text-shadow: 0 -4px  2px orangered ; }
.px5    { text-shadow: 0 -5px  2px orangered ; }
.px6    { text-shadow: 0 -6px  2px orangered ; }
.px7    { text-shadow: 0 -7px  2px orangered ; }
.px8    { text-shadow: 0 -8px  2px orangered ; }
.px9    { text-shadow: 0 -9px  2px orangered ; }
.px10   { text-shadow: 0 -10px 2px orangered ; }
実行結果
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

(3) 影の広がり

第三引き数だけを変更してみる。 大きくなるにつれ、影がにじんでいく。

CSS : 第三引き数
.px0    { text-shadow: 0 0 0    orangered ; }
.px1    { text-shadow: 0 0 1px  orangered ; }
.px2    { text-shadow: 0 0 2px  orangered ; }
.px3    { text-shadow: 0 0 3px  orangered ; }
.px4    { text-shadow: 0 0 4px  orangered ; }
.px5    { text-shadow: 0 0 5px  orangered ; }
.px6    { text-shadow: 0 0 6px  orangered ; }
.px7    { text-shadow: 0 0 7px  orangered ; }
.px8    { text-shadow: 0 0 8px  orangered ; }
.px9    { text-shadow: 0 0 9px  orangered ; }
.px10   { text-shadow: 0 0 10px orangered ; }
実行結果
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

これにマイナス値を設定することはできない。

(4) 影の色

カラーコード で指定する。

CSS : 第四引き数
.orangered { text-shadow: 0 0 2px orangered ; }
.ff8400    { text-shadow: 0 0 2px #ff8400   ; }
.fc0       { text-shadow: 0 0 2px #fc0      ; }
HTML : 適用するHTML
<div class="orangered"  >orangered</div>
<div class="ff8400"     >#ff8400</div>
<div class="fc0"        >#fc0</div>
実行結果
orangered
#ff8400
#fc0

複数の影の指定

複数の影を指定する場合、カンマ(,)でつなげる。

CSS : 第四引き数
.sample1 {
    text-shadow:    2px  1px 3px yellow,
                   -2px -1px 3px green;
}
.sample2 {
    color:          white;
    font-weight:    bold;
    text-shadow:    1px 1px 1px black,
                    0   0   9px orangered;
}
HTML : 適用するHTML
<div class="sample1"  >sample1</div>
<div class="sample2"  >sample2</div>
実行結果
sample1
sample2

Emmet : tsh

記述Visual Studio Code
tshtext-shadow: hoff voff blur #000;
  • box-shadow