text-shadowの作り方｜立体・ネオン文字をGUIで作る完全ガイド
公開日：2026年10月2日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：text-shadowジェネレーター
text-shadow は文字に影や光をつけるCSSプロパティですが、いざ手で書こうとすると「数字が4つ並んでいて何がどれだか分からない」と止まりがちです。この記事では、シルギアの text-shadowジェネレーターが内部で行っている処理に沿って、値の意味・rgbaへの変換・多重影の重ね方を具体的なコード例つきで整理します。読み終える頃には、立体文字やネオン発光を自分で組み立てられるようになります。
text-shadowの4つの値が表すもの
text-shadow の基本形は、半角スペースで区切った4つの値です。左から順に水平方向のずれ（X）、垂直方向のずれ（Y）、ぼかし半径（blur）、影の色を並べます。例えば text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); は「文字の右へ2px・下へ2pxずらした位置に、4pxだけぼかした半透明の黒い影を落とす」という意味になります。
- 水平X：正の値で右、負の値で左へ影が動きます。ツールでは-50〜50pxの範囲で調整できます。
- 垂直Y：正の値で下、負の値で上へ動きます。左上に影を出したいならXとYの両方をマイナスにします。
- ぼかし：0にすると輪郭のくっきりした影、大きくするほど柔らかくにじみます（0〜50px）。
ジェネレーターではこの3つをスライダーと数値入力で触れ、プレビュー文字に効き方がその場で反映されます。スライダーと数値欄は連動しているので、まず大まかにスライダーで探り、決まった値を数値で微調整する流れが分かりやすいでしょう。
不透明度（%）とrgbaのアルファ値の関係
影の色は、色ピッカーで選んだHEX値と不透明度(%)を組み合わせて rgba() 形式に変換されます。rgba() は赤・緑・青の3チャンネルに、4つ目のアルファ値（透明度）を0〜1で加えた書き方です。ツールは不透明度をパーセントで受け取り、100で割ってアルファに換算します。つまり不透明度35%はアルファ0.35、80%は0.8、100%は1です。
色の変換も同じで、HEXの各2桁を10進に直します。たとえば #00e5ff は赤0・緑229・青255なので、不透明度90%なら rgba(0, 229, 255, 0.9) と出力されます。半透明にすると背景や他の影となじみ、逆にアルファを上げると影の主張が強くなります。まず薄め（30〜50%程度）から始め、足りなければ濃くすると調整しやすいです。
多重影（レイヤー）の重ね方
text-shadow はカンマ区切りで複数の影を並べられます。これが多重影（レイヤー）です。記述した順に手前から奥へ描かれ、リストの先頭が最も手前になります。ツールの「影レイヤーを追加」で層を増やし、上下ボタンで重なり順を入れ替え、不要な層は削除できます。生成されるCSSは、各層の「Xpx Ypx blurpx rgba(...)」をカンマでつないだ1行です。
重ねる考え方は単純で、近い影ほど手前・小さいぼかし、遠い影ほど奥・大きいぼかしにすると自然に見えます。同じ色でぼかしだけを段階的に大きくすれば発光、少しずつ位置をずらせば厚みのある立体になります。
立体文字とネオン発光を作る具体例
まず立体（多重）です。同じ濃い色を1pxずつ右下へずらして重ねると、階段状に厚みが出ます。ぼかしは0にして輪郭を残すのが要点です。
text-shadow: 1px 1px 0px rgba(0, 0, 0, 1), 2px 2px 0px rgba(0, 0, 0, 1), 3px 3px 0px rgba(0, 0, 0, 1);
次にネオン発光です。ずれを0のまま、同系色でぼかしを6px→14px→28pxと大きくし、外側ほど薄くすると光がにじんで見えます。ツールのネオンプリセットは次の値を出力します。
text-shadow: 0px 0px 6px rgba(0, 229, 255, 0.9), 0px 0px 14px rgba(0, 179, 255, 0.8), 0px 0px 28px rgba(0, 119, 255, 0.7);
ふんわり浮かせたいだけなら1枚で十分で、text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.35); のようにY方向へ少しずらして大きめにぼかすと、写真の上でも文字が読みやすくなります。5種のプリセットから始めて微調整すると早いです。
ブラウザ対応と使いどころ
text-shadow は Chrome・Edge・Firefox・Safari など主要な最新ブラウザで広く対応しており、ベンダープレフィックスは基本的に不要です。非常に古い環境では影が出ないこともありますが、その場合も文字自体は読めるため、装飾目的なら安心して使えます。効くのはテキストにのみで、箱に影をつけたいときは box-shadow を使います。
向いているのは、見出しやロゴ、写真上のキャッチコピーなど限られた大きな文字です。薄い影で背景から浮かせれば可読性が上がり、多重影を使えばゲーム風の立体やネオンサインのような表現も作れます。生成された「text-shadow: …;」をコピーし、h1やロゴのクラスなど文字を持つ要素のCSSに貼り付けてください。
よくある失敗と注意点
いちばん多いのは影を濃く・多く重ねすぎて本文が読みにくくなることです。長い文章にきつい影をかけると輪郭がにじんで逆効果なので、影は見出しやロゴにとどめ、本文には使わないのが無難です。
- 方向を取り違える：右下に出したいのにYを負にして上へ出てしまう、というミスが起きがちです。Yは正で下、負で上と覚えておきましょう。
- ぼかしと不透明度の混同：ぼかしは輪郭の柔らかさ、不透明度は色の濃さで別物です。にじみを増やしたいのに不透明度を下げても輪郭はぼけません。
- 単位の付け忘れ：X・Y・ぼかしにはpxなどの単位が必要です。ツールからコピーすれば単位付きで出力されます。
入力したプレビュー文字も設定もすべてブラウザ内で処理され外部に送信されません。まずはプリセットで雰囲気をつかみ、値を一つずつ動かして影の変化を確かめてみてください。