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

複数レイヤーのCSS text-shadow効果（グロー、縁取り、レトロな3D、エンボス文字）を作成します。自分のテキストでライブプレビューでき、コードもコピーできます。

プリセット

レイヤー

水平オフセットpx

垂直オフセットpx

ぼかしpx

影の色

不透明度

プレビュー設定

背景色

文字色

サンプルテキスト

プレビュー

シャドウ

CSS コード

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

テキストシャドウジェネレーターとは？

このツールは、1つ以上のレイヤーからCSSの text-shadow プロパティを作成します。各レイヤーには水平・垂直オフセット、ぼかし、色、不透明度があり、プレビューでは自分のサンプルテキストに結果が反映されます。

テキストシャドウジェネレーターの使い方

グロー、レトロ、縁取り、エンボスなどのプリセットから始めるか、既定の影のまま使います。
レイヤーを選び、水平オフセット、垂直オフセット、ぼかし、影の色、不透明度を設定します。
縁取りや重ねた3D効果には、さらにレイヤーを追加します。不要なレイヤーは削除します。
自分のサンプルテキストを入力し、文字色と背景色を選んで、読みやすさを確認します。
CSSコードをコピーします。

例

入力

x 3px, y 3px, blur 0, color #ff0000, opacity 1

出力

text-shadow: 3px 3px 0 #ff0000;

テキストシャドウジェネレーターを使うべき場面

見出し、ヒーローテキスト、ネオンやレトロな効果、画像の上でコントラストを高める控えめな影に使います。大きな文字の本物の縁取りには、重ねた影より -webkit-text-stroke のほうがくっきり仕上がります。本文には強い影を使うと読みにくくなるので避けてください。

テキストシャドウジェネレーターの仕組み

各レイヤーは x y blur color の形で書かれます（text-shadowには広がりやinsetはありません）。オフセットとぼかしはpx値で、不透明度は色のアルファに適用され、不透明な色はhex、それ以外は rgba() になります。レイヤーはカンマで区切られ、最初のものが一番上に描画されます。縁取りのプリセットは、斜め各方向に1pxのオフセットを4つ使います。これは、純粋なCSSで文字のストロークを擬似的に作る一般的な方法です。