CSS text-shadowジェネレーター
X/Yオフセット・ぼかし半径・色を調整すると、入力したテキストのプレビューと生成されるCSSがリアルタイムに更新されます。影は最大8レイヤーまで重ねられ、「ネオン」「縁取り」「エンボス」などのプリセットから始めることもできます。生成されたtext-shadow宣言はコピーボタンでそのままコピーできます。要素の影には CSS box-shadowジェネレーター もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プリセット
プレビュー
影レイヤー
影レイヤーは1〜8個まで設定できます。
注意事項
- text-shadowにはbox-shadowのような広がり半径（spread）やinsetはありません。
- 色の入力は`<input type="color">`の仕様上、6桁の16進数のみ指定できます（アルファチャンネル非対応）。半透明にしたい場合は、生成されたCSSの色部分を`rgba()`などに書き換えてください。
- 複数の影を指定した場合、先に書いた影ほど手前に表示されます。
- ぼかしの大きいレイヤーを多数重ねると、描画が重くなることがあります。
用語解説
text-shadow
テキストに影を付けるCSSプロパティ。`text-shadow: X Y ぼかし 色;`の形式で指定し、カンマ区切りで複数の影を重ねられる。
オフセット（offset）
影をずらす距離。X方向は正で右、負で左、Y方向は正で下、負で上にずれる。
ぼかし半径（blur-radius）
影の輪郭をぼかす度合い。0ならくっきりした影になり、大きいほど広くなめらかに広がる。
よくある質問
text-shadowにはbox-shadowのようなspreadやinsetがありますか？
ありません。text-shadowは「X方向 Y方向 ぼかし 色」の4値のみで、広がり半径（spread）や inset は指定できません。縁取り風にしたい場合は、ぼかし0の影を上下左右に複数重ねます。
ネオン風の文字にするにはどうすればよいですか？
プリセットの「ネオン」を選んでください。白い小さな影の上に、同じ位置でぼかしを段階的に大きくした色付きの影を重ねると光って見えます。背景は暗い色にすると映えます。
複数の影を重ねたとき、どの影が上に表示されますか？
先に書いた影ほど手前に表示されます。縁取りと光彩を組み合わせる場合は、縁取り用の影を先頭に置いてください。
半透明の影にしたい場合はどうしますか？
色選択は6桁の16進数のみのため、生成されたCSSの色部分を `rgba(0 0 0 / 0.5)` のように直接書き換えてください。
このページをシェア