CSS テキストシャドウ ジェネレーター
無料オンライン CSS text-shadow ジェネレーター。オフセット・ぼかし・色・不透明度を設定した複数レイヤーを重ねて、ネオンや 3D、レトロのプリセットを試せます。ライブプレビューで即 CSS コピー。
CSS の text-shadow プロパティとは？
text-shadow はテキストの字形に影の効果を加えるプロパティです。各シャドウは水平オフセット・垂直オフセット・省略可能なぼかし半径・色で定義され、複数のシャドウをカンマ区切りで 1 つの値にまとめてリッチな効果を作れます。
複数のシャドウレイヤーはどう動きますか？
レイヤーは宣言順に下から描画され、リストの最初のシャドウが一番上に表示されます。このジェネレーターではレイヤーの追加・削除・有効化・無効化ができ、各レイヤーに独自のオフセット・ぼかし・色・不透明度を設定してネオンや 3D などの効果を重ねられます。
オフセット X・Y とぼかしの意味は？
オフセット X は影を字形の左右に、オフセット Y は上下に動かします。ぼかし半径は縁の柔らかさを決め、0 はレトロやアウトラインのような硬い縁に、大きい値はグローのように色をにじませます。
ネオンの発光効果は作れますか？
ネオン プリセットを使うか、オフセット 0 の複数レイヤーに同じ明るい色を設定し、0 0 3px、0 0 8px、0 0 20px のようにぼかしを段階的に大きくします。重なったハロがネオン管の輝きを再現します。
text-shadow は描画パフォーマンスに影響しますか？
静的な数層なら軽量ですが、大きなぼかしのシャドウを多数持つテキストは再描画コストが上がります。長い段落への重いシャドウや text-shadow の連続アニメーションは、低スペック機やモバイルでコマ落ちの原因になります。短い見出しや控えめなぼかしにし、アニメーションは不透明度で行うのがおすすめです。
影を半透明にするには？
各レイヤーに不透明度スライダーがあり、選んだ色を rgba 表記に変換します（例：rgba(0, 0, 0, 0.5)）。半透明の影はどんな背景にも自然に馴染み、ペーパー プリセットはこれで柔らかいレタープレス調を作っています。
text-shadow と box-shadow の違いは？
text-shadow はテキストの字形に適用され、広がり（spread）や内側（inset）の値を持ちません。box-shadow は要素の矩形ボックスを囲みます。オフセットとぼかしの構文は共通ですが、互いに代用できません。
text-shadow に対応しているブラウザは？
text-shadow は Chrome・Firefox・Safari・Edge・Opera など最新のブラウザすべてでサポートされ、10 年以上前からプレフィックスなしで安定しています。複数レイヤーのシャドウもどこでも同じように機能します。
入力した内容はサーバーに送信されますか？
いいえ。プレビュー テキストも設定したレイヤーもブラウザ内にとどまり、CSS はページ上でローカルに生成されます。ネットワーク通信は一切なく、読み込み後はオフラインでも使えます。
CSS テキストシャドウ ジェネレーターの使い方
一つのオフセットを当て込むのではなく、レイヤーを重ねて CSS のテキストシャドウを設計します。変更はすべて大きなライブプレビューテキストに即時反映され、CSS はブラウザー内でローカル生成されます。
- 「プレビューテキスト」欄に自分の言葉を入力して、実物のコピーで効果を確かめます。
- プリセットを試します：ネオン、ペーパー、3D、レトロ、グロー、アウトラインが完成済みレイヤーを読み込みます。
- 各レイヤーのスライダーでオフセット X・オフセット Y・ぼかし・色・不透明度を調整します。
- 「レイヤーを追加」でシャドウを重ね、チェックを外して一時的に無効化、ゴミ箱アイコンで削除できます。
- 生成された text-shadow ルールをコピーしてスタイルシートに貼り付けます。
ネオンのグローは同じ色を 3〜4 層重ねてぼかしを段々大きくするのがベスト。オフセットは 0 のままにして、ぼかしに光らせ役を任せましょう。
関連ツール
- CSS ボックスシャドウ ジェネレーター 無料オンライン CSS box-shadow ジェネレーター。オフセット、ぼかし、広がり、色、内側シャドウを調整して美しいシャドウをビジュアルに作成。ライブプレビューと即座にコードコピー。
- CSSグラデーションジェネレーター ビジュアルに素晴らしいCSSグラデーションを作成。複数のカラーストップ、カスタム角度、位置で線形・放射・円錐グラデーションを生成。本番対応CSSコードを即座にコピー。
- おしゃれ文字ジェネレーター 28種類のユニコードスタイルを備えた無料の装飾文字ジェネレーター。太字・斜体・フラクトゥール・丸文字などをワンクリックでコピーし、InstagramやTikTokのプロフィール、ゲームの名前に使えます。
- border-radius ジェネレーター 無料オンライン border-radius ジェネレーター。8つのハンドルをドラッグするかblobプリセットを選んで、有機的なCSSシェイプを作成し、コードをすぐにコピーできます。
- カラーコンバーター 無料オンラインカラーコンバーター。HEX、RGB、HSL、HSV形式をビジュアルピッカーで即座に変換。100% プライベート、ブラウザで動作。
- CSS イージング ジェネレーター 無料オンライン CSS イージング ジェネレーター。インタラクティブな曲線上で cubic-bezier の制御点をドラッグし、18 種類のプリセットから選んで、ボールのループ アニメーションで確認しながらタイミング関数を即座にコピー。
- CSS clip-path ジェネレーター 無料オンライン CSS clip-path ジェネレーター。頂点をドラッグして polygon・circle・ellipse・inset の形状を作り、ライブプレビューしながら CSS をワンクリックでコピー。
- CSSビューティファイアー CSSコードを即座にフォーマット・美化します。圧縮されたCSSを読みやすく、適切にインデントされたコードに変換します。カスタマイズ可能なオプション付き。