テキストシャドウ ジェネレーター 🔤

テキストシャドウ ジェネレーターについて

このテキストシャドウ ジェネレーターは、すべてブラウザ内で完結します。複数の text-shadow レイヤーを追加し、それぞれに X/Y オフセット・ぼかし半径・色を設定すると、プレビューがリアルタイムで更新され、生成された CSS をそのままコピーできます。レイヤーは上から下に描画され、リスト最上部のレイヤーが最初に描画されるため背面に回ります。すべての処理はローカルで行われ、何もアップロードされません。

text-shadow プロパティ

• X オフセット —— 水平オフセット（ピクセル）。正で右、負で左に移動します。
• Y オフセット —— 垂直オフセット（ピクセル）。正で下、負で上に移動します。
• ぼかし —— ぼかし半径（ピクセル）。0 で鮮鋭、値が大きいほど柔らかくなります。
• 色 —— シャドウの色。HEX または任意の CSS 色形式で指定します。

使い方

1. + レイヤー追加をクリックして新しい text-shadow レイヤーを追加します。
2. 各レイヤーの X・Y・ぼかし・色を編集します。カラースウォッチをクリックして色を変更できます。
3. プレビュー背景をライト/ダークで切り替えてシャドウの見え方を確認します。
4. 各レイヤーの上下矢印で並び替え、× で削除できます。
5. CSS をコピーで最終的な text-shadow 宣言をコピーします。

よくある質問

複数のシャドウはどう組み合わされますか？ CSS はカンマ区切りの text-shadow 値をサポートします。リストの最初のシャドウが最前面に描画されるため、レイヤー順序を変えると手前になるレイヤーが変わります。

ネオンやグロー効果は作れますか？ はい。同じオフセットで低ぼかしの複数レイヤーを重ねて明るい色を使うと、グロー効果になります。

text-shadow と box-shadow の違いは？ text-shadow はテキスト字形のみに適用され、box-shadow は要素ボックス全体に適用されます。構文は似ています。

このツールは設定をアップロードしますか？ いいえ。すべての操作はローカルブラウザで行われます。