文字に影（ドロップシャドウ）を付ける text shadow (drop shadow)

影（ドロップシャドウ）について

文字に影を付ける場合はtext-shadowプロパティを使用します。
ぼかし、色は省略でき、色を省略した場合は文字色と同色が反映されます。
box-shadowと違い、広がり距離とinsetがないことにご注意ください。

構文

							text-shadow:水平方向の位置 垂直方向の位置;
							または
							text-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ;
							または
							text-shadow:水平方向の位置 垂直方向の位置 ぼかしの長さ 色;
						

場所	初期値	説明
1つ目 必須		水平方向の位置 正の値で右方向、負の値で左方向
2つ目 必須		垂直方向の位置 正の値で下方向、負の値で上方向
3つ目	0	ぼかしの長さ
4つ目	currentColor	影の色 省略するとテキストと同じ色になる

サンプル

• ※ サンプルでは分かりやすくするため、フォントサイズを大きくしています。
• ※ サンプルにはありませんが、水平方向の位置と垂直方向の位置を0にすることで、光彩（グロー）効果の表現が可能です。

.sample1 { text-shadow:3px 3px; } .sample2 { text-shadow:1px 1px 3px; } .sample3 { text-shadow:1px 1px 3px #d00; } .sample4 { text-shadow:-1px -1px 3px #d00; }

複数の影を指定

カンマで区切ることにより、1つの文字に対して複数の影を付けることが可能です。

サンプル

div.sample { text-shadow:3px 3px 0 #f93, -3px -3px 0 #d00; }

応用編（様々な影の表現）

複数指定やその他プロパティを使用することで、様々な影の表現が可能です。

div.sample { text-shadow:1px 1px 3px #d00; color:transparent; } div.sample { text-shadow:1px 1px 0 #fff, 2px 2px 0 #000; } div.sample { /* 右, 右下, 下, 左下, 左, 左上, 上, 右上の指定をしています */ text-shadow: 1px 0 0 #d00, 1px 1px 0 #d00, 0 1px 0 #d00, -1px 1px 0 #d00, -1px 0 0 #d00, -1px -1px 0 #d00, 0 -1px 0 #d00, 1px -1px 0 #d00; } div.sample { text-shadow: 0 2px 0 #888, 0 3px 0 #888, 0 4px 5px #333; } div.sample { text-shadow: 1px 1px 0 #d00, 2px 2px 0 #d00, 3px 3px 0 #d00, 4px 4px 0 #d00, 5px 5px 0 #d00; } div.sample { background-color:#666; text-shadow:0 2px 1px rgba(255, 255, 255, 0.5); background-clip:text; color:transparent; }