Text Shadow ジェネレータ
CSS text-shadow 効果をビジュアルに設計し、ライブプレビューで確認。プリセットを選択するか、複数のシャドウレイヤーで独自に構築。ワンクリックで CSS コードをコピー。すべてブラウザで実行されます。
動作方法: プリセットを選択するか、シャドウレイヤーを手動で追加。各レイヤーのオフセット、ぼかし、色を調整したら CSS をコピー。プレビューはリアルタイムで更新されます。最大 5 つのシャドウをスタックしてより複雑な効果を作成可能。データはサーバーに送信されません。
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.50);CSS text-shadow とは
CSS の text-shadow プロパティは、テキスト文字に 1 つ以上のシャドウ効果を直接追加します。要素のコンテナをラップする box-shadow とは異なり、text-shadow は各文字の曲線とストロークに沿います。これにより、微妙な深さからビビッドなネオングロー効果まで、タイポグラフィ効果に最適です。シャドウは宣言順に重ねられ、最初のシャドウが上に表示されます。レイアウトフローに影響を与えないため、シャドウの追加や削除は周囲の要素をシフトさせません。すべての最新ブラウザが text-shadow をサポートし、パフォーマンスも優秀で、あらゆるプロジェクトで安全かつ軽量な選択肢となります。
CSS text-shadow の構文
text-shadow 省略形は 3 つの長さ値と色を取ります：offset-x、offset-y、blur-radius、color です。offset-x はシャドウを水平方向にシフト（正の値は右に移動、負の値は左に移動）。offset-y は垂直方向にシフト（正の値は下に移動）。blur-radius はシャドウの端の柔らかさを制御します — 0 の値は鋭くシャープなシャドウを、より大きな値は拡散したグロー効果を作成します。色は rgba() や hsla() を含むあらゆる有効な CSS 色値を受け取り、透明度を設定可能です。blur-radius は省略でき、デフォルトは 0 です。複数のシャドウは同じプロパティ上にカンマで区切られたリストとして宣言されます。
創造的な効果：ネオン、グロー、レトロ、エンボス
複数の text-shadow を重ねることで、幅広い視覚的なスタイルが実現できます。ネオングロー効果は、同じ色調で異なるぶらかし半径と透明度を持つ 2 ～ 3 つのシャドウをオフセットなしで積み重ねることで実現。レトロ 3D テキストは、シャープなシャドウ（ぼかし 0）を固定オフセットで配置し、対照的な色で重ねます。エンボス効果は、光のシャドウを負のオフセットで、暗いシャドウを正のオフセットで組み合わせ、テキストが背景から浮き出ているような錯覚を作り出します。ファイア効果は赤、オレンジ、黄色のシャドウを負の y オフセットで重ねて、上向きの炎をシミュレート。これらの構成要素を理解すれば、1 つの画像も使わずにほぼすべてのタイポグラフィ効果を構成できます。
Text Shadow のヒントとベストプラクティス
- rgba() 色を使用してテキスト色に影響を与えずに各シャドウの透明度を制御
- ぼかし 0 はシャープなレトロスタイルのシャドウを作成 — ビンテージやゲーム UI に最適
- 2 ～ 3 つのシャドウを増加するぶらかし半径で積み重ねて、リアルな柔らかいグロー効果を実現
- アニメーション するテキストには 4 レイヤー以上のシャドウを避ける — 各レイヤーはペイントコストを追加
- 暗い背景と明るい背景をテスト：暗い背景では見えないシャドウが明るい背景では厳しく見える場合がある
- オフセット値を小さく保つ（1 ～ 4px）して、可読性を損なわない微妙な深さを実現