CSS text-shadowジェネレーター
新着CSSのテキストシャドウをライブプレビューで調整し、コードをコピー。
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
リアルタイムプレビューでCSSテキストシャドウをデザイン
このCSSテキストシャドウジェネレーターでは、奥行き・グロー・アウトライン効果をビジュアルで設計し、プロダクション対応のクリーンなCSSをコピーできます。大きなプレビューエリアに直接クリックして自分のテキストを入力し、オフセット・ブラー・不透明度のスライダーを動かして色を選ぶと、text-shadowがリアルタイムで更新されます。
フォントファミリー・サイズ・ウェイトを変更し、テキストカラーを設定。背景をライト・グレー・ダーク・チェッカーボードに切り替えて、様々な背景でのシャドウの見え方を確認できます。ネオン文字やグロー文字効果は暗い背景でのみ正しく見えるため、この機能は特に重要です。
text-shadowの構文を解説
CSSシャドウはtext-shadow: offset-x offset-y blur-radius colorと書きます。offset-xとoffset-yはシャドウを水平・垂直方向に移動し（負の値で上や左に投影）、blur-radiusはエッジを柔らかくします（0で鋭いまま）。colorはトーンを決め、微妙な奥行きには半透明の黒、グロー効果には鮮やかな色を使います。
定番の読みやすいシャドウはtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)。両方のオフセットを0にしてブラーを増やすと、テキスト周辺にソフトなハローが生まれます。鮮やかな色（例：#00eaff）に段階的なブラー値を重ねると、ネオングローになります。
複数シャドウを重ねる：ネオン・3D・アウトライン・ロングシャドウ
text-shadowの真の力はスタッキングにあります。カンマ区切りで複数のテキストシャドウを1つの宣言に並べ、ブラウザーが順番に描画します。同じ鮮やかな色でブラーを段階的に増やした複数シャドウはネオン／グロー効果を生み出し、右下方向へオフセットを段階的にずらして暗くすると3D押し出し文字になります。同じフラットオフセットを10層以上繰り返すとロングシャドウ、グリフ周辺に4〜8個の硬質シャドウを置くとアウトライン文字が完成します。
プリセットギャラリー — Soft・Neon・Glow・3D・Long shadow・Outline・Retro・Fire・Letterpress — を出発点として、レイヤーの追加・削除・並び替えで自由にカスタマイズできます。
CSS・Tailwind・React Nativeをコピー
プロジェクトに合った形式でエクスポートできます。CSSをコピーで標準のtext-shadow宣言、Tailwindをコピーで[text-shadow:2px_2px_4px_#00000066]のような任意プロパティクラス（Tailwind v4のネイティブtext-shadow-*ユーティリティと互換）、React Nativeをコピーで最初のレイヤーをtextShadowColor・textShadowOffset・textShadowRadiusに変換して取得できます。
ブラウザー互換性の朗報：text-shadowは完全に標準化されており、現在のすべてのブラウザーで-webkit-や-moz-プレフィックスは不要です。
CSSmatic・css.generator.coolなどとの比較
多くのオンラインCSSテキストシャドウツールは1層のシャドウしか扱えません。CSSmaticのテキストシャドウセクションはスライダーセットを提供しますが、ネオンや3D効果のためにレイヤーを重ねるには追加の宣言を手書きする必要があります。
UtiloKitはマルチレイヤースタッキング・9種のプリセット（1クリックで完全なシャドウスタックをロード）・編集可能なライブプレビュー・3形式（CSS・Tailwind・React Native）のワンクリックコピー・共有リンクを1つのツールに統合しています。登録不要、ファイルアップロードなし。
text-shadowとbox-shadowの違い
よく混同されますが：text-shadowは文字（グリフ）の輪郭に沿ってシャドウを投影し、box-shadowは要素の矩形ボックスに沿って投影します。text-shadowにはスプレッドラジウスもinsetキーワードも存在しないため、box-shadowと違ってインセット（内側）シャドウは作れません。テキストシャドウは見出し・ロゴ・ラベルに、ボックスシャドウはカードやボタンに使いましょう。
テキストに刻印や浮き彫りのような見た目を作るには、暗いテキストのすぐ下に明るいシャドウを置く手法が使えます（Letterpressプリセット参照）。太いアウトライン線には-webkit-text-strokeプロパティが8方向シャドウを重ねるより簡潔です。
読みやすいシャドウのコツ — そしてプライバシー
シャドウはスタイリングのアクセントであり、コントラストの代替ではありません。写真上のテキストには0 1px 3px rgba(0, 0, 0, 0.5)のような低不透明度のシャドウ1層で可読性を高めつつ邪魔にならないようにできます。重いネオンや3D効果は大きなディスプレイ見出し専用にして、テキストコントラストがWCAG基準を満たすか常に確認してください。
インストール不要、アカウント不要。すべてのプレビューと生成されたCSSはブラウザー内でローカル処理されるため、入力したテキストがデバイス外に出ることはありません。
Frequently asked questions
テキストシャドウを適用するには？
任意のテキスト要素にCSSプロパティtext-shadowを追加します。省略形はtext-shadow: offset-x offset-y blur-radius color。例えばtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)は右に2px、下に2px、ブラー4pxのソフトシャドウを投影します。このジェネレーターではライブプレビューに入力し、スライダーを調整してCSSをコピーするだけです。
CSSのtext-shadowとは何ですか？
text-shadowはCSSプロパティで、要素のテキストの背後に1つ以上のシャドウを描画します。各シャドウは最大4つの値を受け取ります：水平オフセット(X)、垂直オフセット(Y)、オプションのブラー半径、色。例：text-shadow: 1px 1px 2px #000000。
CSSでシャドウを追加するには？
テキストにはtext-shadowを要素のルールで使います。例：h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }。ボックス・カード・ボタンにはbox-shadowを使います。
デザインツールでテキストにシャドウを追加するには？
Figma・Sketch・Photoshopなどのデザインツールでテキストレイヤーにドロップシャドウエフェクトを追加し、X/Yオフセット・ブラー・色を設定します。この4つの値はCSSにほぼ1対1で対応します：FigmaのX 2、Y 2、Blur 4、黒40%はtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)になります。
グロー（発光）やネオン文字効果を作るには？
ネオングローは、同じ鮮やかな色のシャドウをゼロオフセット・段階的ブラーで重ねたものです。例：text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; — 白テキストに暗い背景で。Neonプリセットを読み込むと瞬時に得られます。
3D文字やロングシャドウを作るには？
どちらもブラーなしのオフセット付き複数シャドウを使います。3D押し出し文字は右下方向に段階的に暗くなる色でレイヤーを積み重ねます。3DとLong shadowプリセットがこのレイヤースタックを自動生成します。
text-shadowでアウトライン文字を作るには？
テキストの周囲に各方向ブラー0のハードシャドウを4つ（または8つ）配置します。例：text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; は白テキストに細い黒アウトラインを追加します。
複数のテキストシャドウを作るには？
1つのtext-shadow宣言内でカンマで区切ります：text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;。ブラウザーは順番に描画し、最初のシャドウが最前面に来ます。ネオン・3D・ファイア・アウトライン効果はすべてこの方法で構築されています。
text-shadowをinset（内側）にできますか？
できません。box-shadowとは異なり、text-shadowプロパティにはinsetキーワードもスプレッドラジウスもありません。明るい背景に彫刻風の見た目を模倣するには、暗いグレーのテキストのすぐ下に明るい微妙なシャドウを追加します（例：text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);）。Letterpressプリセットがこのトリックを実演しています。
Tailwind CSSでテキストシャドウを設定するには？
Tailwind CSS v4にはネイティブのテキストシャドウユーティリティ（text-shadow-sm・text-shadow-md・text-shadow-lg）があります。カスタム値にはスペースをアンダースコアに変えた任意プロパティを使います：class="[text-shadow:2px_2px_4px_#00000066]"。
text-shadowに-webkit-や-moz-プレフィックスは必要ですか？
いいえ。text-shadowは完全に標準化されており、現在のすべてのブラウザーでプレフィックスなしで動作するため、text-shadow: 1px 1px 2px #000;だけで十分です。
text-shadowとbox-shadowの違いは何ですか？
text-shadowはグリフ（文字そのもの）の形状からシャドウを投影し、box-shadowは要素の矩形ボックスから投影します。text-shadowにはスプレッドラジウスもinsetオプションもなく、box-shadowにはどちらもあります。
テキストの可読性を高めるさりげないシャドウの追加方法は？
小さなオフセットと数ピクセルのブラーを持つ低不透明度のダークシャドウを使います。例：text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);。写真やグラデーション背景から白または明るいテキストを浮き立たせ、コントラストを改善します。
CSSmaticなど他のtext-shadowツールとどう違いますか？
CSSmaticにはテキストシャドウセクションがありますが、1層しか扱えません——ネオン・3D・アウトライン効果のために複数シャドウを重ねるには手動でコードを編集する必要があります。UtiloKitはマルチレイヤースタッキング・命名プリセット・ライブプレビュー・CSS/Tailwind/React Nativeへのワンクリックエクスポートを統合した唯一の無料ツールです。
生成されたCSSはどうコピーしますか？オフラインでも使えますか？
CSSをコピーでペースト可能な宣言、Tailwindをコピーで任意プロパティクラス、React NativeをコピーでtextShadowColor/textShadowOffset/textShadowRadiusの相当コードを取得できます。リンクを共有で正確な設定をURLに保存できます。すべて無料・登録不要・ローカル動作で、読み込み後はオフラインでも使用可能です。
Related tools
すべてのツールを見る
新着 CSSグラデーションジェネレーター
線形・放射・円錐のCSSグラデーションをライブプレビューで作成。
新着 CSS box-shadowジェネレーター
多層のCSS box-shadowをプリセットとライブプレビューで作成。CSS・値・Reactスタイルを即コピー。
新着 カラーパレットジェネレーター
補色・類似色・トライアド・モノクロームのパレットを生成。
新着 三次ベジェ曲線ジェネレーター
制御点をドラッグしてCSSのイージング曲線を設計。ライブプレビュー付き。
新着 角丸ジェネレーター
CSSの角丸や有機的なブロブ形状を視覚的に作成。
新着 CSS Flexboxプレイグラウンド
flexプロパティをライブプレビューで調整し、CSSをコピー。