🔤 CSSテキストシャドウ生成

CSSテキストシャドウ生成について

text-shadow CSSプロパティはテキストにシャドウ効果を追加します。カンマ区切りのリストで複数のシャドウを重ねて、グロー、アウトライン、3D、ネオン効果を作れます。本ジェネレーターで必要なだけレイヤーを追加し、完全なCSS文字列を即座にコピーできます。

コントロール可能なプロパティ

• 水平オフセット —— 正の値でシャドウが右に、負の値で左に移動します。
• 垂直オフセット —— 正の値でシャドウが下に、負の値で上に移動します。
• ぼかし半径 —— 0で鮮明なコピー、値を上げると柔らかくフェードします。
• 色 —— 任意のCSS色。rgba()で透明度も指定可能。
• 複数レイヤー —— レイヤーを重ねてグロー、アウトライン、3D効果を作れます。

使い方

1. 最初のレイヤーのオフセット、ぼかし、色を調整します。
2. レイヤー追加をクリックしてシャドウを重ねます。
3. 不要なレイヤーは×ボタンで削除します。
4. プレビューテキストと背景をデザインに合わせて編集します。
5. CSSをコピーをクリックしてスタイルシートに貼り付けます。

よくある質問

ネオングロー効果はどう作る？ 同じ明るい色で3〜4レイヤーを追加し、ぼかしを大きく（例：0px、2px、6px、12px）——重ねたぼかしが柔らかなハローを作ります。

テキストのアウトラインは作れますか？ はい——ぼかし0で上下左右に1pxずつずらした4レイヤーを使用します。ストローク効果をシミュレートできます。

シャドウがギザギザに見えるのはなぜ？ ぼかし0はテキストの硬いコピーを作ります。ぼかしをわずかに上げるとエッジが滑らかになります。