text-shadow（テキストの影）プロパティ
最終更新：2026-09-13
text-shadow text-shadow（テキストの影）プロパティ
text-shadow プロパティはテキストに影を追加し、背景に対して奥行きと視覚的な階層を与えます。各影は水平オフセット、垂直オフセット、ぼかし半径、色を持ちます。複数の影をカンマで区切って重ねることで、発光や浮き出し、縁取りなどの効果を作れます。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | はい |
| 適用対象 | all |
| アニメーションタイプ | shadow |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
text-shadow: none | <shadow>#;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
none | キーワード | テキストの影なし |
<shadow> | タイプ | 水平オフセット、垂直オフセット、ぼかし半径、色 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v1.1 | ✓ v9.5 |
| すべての主要ブラウザーでサポート | |||||
ヒント： ぼかし半径を 0 にしてオフセットを 1px にすると縁取りを模倣できますが、本物のテキストの縁取りには -webkit-text-stroke を推奨します。
注意： 影が多すぎたりぼかし半径が大きすぎたりすると可読性を損ないます。控えめに使い、背景との十分なコントラストを保ってください。
❓ よくある質問
QCSS における text-shadow と box-shadow の違いは何ですか？
Atext-shadow は文字そのものに適用され、テキストの形状に沿います。box-shadow は要素全体のボックスに適用され、矩形の影を作ります。text-shadow に spread（拡張半径）はなく、内側の影用の inset キーワードもサポートしません。
Qtext-shadow プロパティで 1 つの宣言に複数の影を追加できますか？
Aはい。複数の影をカンマで区切り、先に書いたものが上に描画されます。各影の引数は水平オフセット、垂直オフセット、ぼかし半径、色の順です。影を重ねることでネオン発光や立体文字の効果を作ります。
QCSS で text-shadow を使ってテキストの縁取り効果を作るにはどうすればよいですか？
A4 方向に 1px の影を使います。text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000。よりすっきりする方法は -webkit-text-stroke: 1px #000 です。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
