テキスト
text-shadow
text-shadow は文字の形に沿って影を落とします。カンマで区切って複数の影を重ねられます。
構文
none | <shadow-t>#
<shadow-t> = [ <length>{2} <length [0,∞]>? ] && <color>?プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
text-shadow: 2px 4px 6px #0f172a40;
}コントロール
影 1
offset-x
offset-y
blur-radius
color
解説
3 つの長さ
- 1 つ目と 2 つ目は横・縦のずれ（offset）です。正の値で右・下にずれます。
- 3 つ目はぼかし（blur）です。大きいほど広く薄くなり、負の値は指定できません。省略すると
0（くっきりした影）です。
box-shadow と違い、広がり（spread）と inset はありません。文字を太らせたように見せたいときは、上下左右に少しずらした影を重ねます（プリセットの「縁取り」）。
色と重ね順
色を省略すると currentcolor（文字色）になります。複数の影は先に書いたものが上に重なり、どの影も文字そのものより下に描かれます。ずらした影を 1px ずつ重ねていくと、立体的な文字になります。
継承とレイアウト
text-shadow は継承するプロパティです。親に付けると中の文字すべてに影が付くので、一部だけ消したいときは子に text-shadow: none を指定します。影はレイアウトに影響せず、下線などの text-decoration の線にも付きます。