Text Shadow ジェネレーター

このツールについて

この CSS text-shadow 作成ツールは、text-shadow のオフセット、ぼかし、色、不透明度をライブプレビューしながら設定でき、複数の影のレイヤーを重ねてグロー、縁取り、3D の文字効果を作れます。

使い方

1. 水平・垂直のオフセットとぼかしを調整します。
2. 影の色と不透明度、文字色とサイズを選びます。
3. 「レイヤーを追加」で影を重ね、「レイヤーをリセット」で最初からやり直します。
4. 「CSS をコピー」をクリックします。

知っておきたいこと

• text-shadow の構文は offset-x offset-y blur-radius color です。
• box-shadow と違い、text-shadow には広がりの値や inset キーワードはありません。
• 複数の影はカンマで区切り、最初の影が一番上に描画されます。
• オフセット 0 でぼかしを付けた影は、グロー効果になります。
• 1 px ずつずらした影を何枚も重ねると、3D や活版印刷のような見た目になります。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問