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

CSSテキストシャドウジェネレーター：ネオン、3D、ロングシャドウ + Tailwind | We.Inc

重ねたCSSのテキストシャドウをライブプレビューで作成できます。ネオン、3D、ロングシャドウ、活版印刷、縁取りのプリセットから始めて、CSSやTailwindのクラスをコピーしましょう。

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

CSSのテキストシャドウのプロパティは、横方向のずれ、縦方向のずれ、省略可能なぼかしの半径、色を受け取ります。たとえば text-shadow: 0 2px 6px rgb(0 0 0 / 0.25) のように書きます。複数の影をカンマで区切ると重ねることができ、ネオンの光や3Dの文字はこの方法で作られています。下で影を作って、CSSかTailwindのクラスをコピーしましょう。

1つの影を構成する4つの値

値
例
効果

横方向のずれ
影を右に動かす（負の値なら左）

縦方向のずれ
影を下に動かす（負の値なら上）

ぼかしの半径
輪郭をやわらげる。0にするとくっきりした複製になる

rgb(0 0 0 / 0.25)
任意のCSSの色。既定は文字色

好きなだけレイヤーを重ね、テキスト、文字サイズ、色を変えると、プレビューがすぐに更新されます。出力は現行のすべてのブラウザーで動く素のCSSで、Tailwindを使うプロジェクト向けのクラスも用意しています。

プリセットを選ぶか、やわらかい影1つから始めます。
各レイヤーのずれ、ぼかし、色、不透明度を編集したり、レイヤーを追加・削除したりします。リストの先頭にあるレイヤーほど上に描画されます。
デザインに合わせて、プレビューのテキスト、サイズ、太さ、色を変えます。
CSSの宣言か、Tailwindの任意プロパティのクラスをコピーします。

影はコントラストのチェックには含まれません。影がなくても文字が背景に対して基準を満たしていることを確認し、影は仕上げとして加えましょう。
ごちゃごちゃした写真の上に白い文字を置く場合、くっきりした影よりもやわらかい暗い影のほうが読みやすくなります。本当に読みやすくするには、画像に暗いオーバーレイも重ねましょう。
多くのレイヤーで大きなぼかしを使うと描画に時間がかかり、アニメーションさせるとさらに負荷が増えます。強い光の効果は見出しにとどめ、本文には使わないようにしましょう。
グレーの背景に置いたグレーの文字の下に1pxの明るい影を付けると、押し込まれたような活版印刷風の見た目になります。ずれを逆にすると、浮き上がった文字になります。

よくある質問

CSSでネオン文字を作るには？

明るい色の文字に、同じ鮮やかな色の影を、ずれ0でぼかしを大きくしながら複数重ねます。まず白の小さな光、次にアクセントカラーで12px、24px、48pxの光を重ねます。背景は暗くしましょう。ネオンのプリセットを出発点として使えます。

テキストシャドウにはボックスシャドウのような広がりの値がありますか？

ありません。テキストシャドウには広がりの値も、内側の影を指定するキーワードもありません。太い縁取りを再現するには、縁取りのプリセットのように各方向に1ピクセルずつずらしたくっきりした影を複数重ねるか、-webkit-text-stroke を使います。

Tailwindでテキストシャドウを付けるには？

Tailwind 4.1 以降には、text-shadow-sm や text-shadow-lg などのユーティリティが含まれています。どのバージョンでも独自の影を付けるには、[text-shadow:0_2px_6px_rgb(0_0_0/0.25)] のような任意プロパティを使います。アンダースコアはスペースを表します。このクラスはジェネレーターが書き出してくれます。

Safariで影の見え方が違うのはなぜですか？

ブラウザーごとにぼかしのラスタライズの方法がわずかに異なるため、大きなぼかしはエンジンによってやわらかく見えたり強く見えたりします。ぼかし0のくっきりした影なら、どこでも同じに見えます。

重ね合わせの仕組み

カンマで区切った各影は文字の後ろに描画され、リストの最初の影がほかの影の上に来ます。この順番は3D効果で重要です。最も近く最も明るいレイヤーを最初に、最も遠く最も暗いレイヤーを最後に並べましょう。
ロングシャドウは、同じレイヤーを1ピクセルずつずらしてたくさん重ねただけのものです。大きな見出しでは印象的に見えますが、レイヤーが増えるたびに描画処理も増えるので、段数はほどほどにしましょう。

アクセシビリティとモーション

影は小さな文字をぼやけさせ、ロービジョンの人にとって読みにくくすることがあります。装飾的な効果は大きな見出しに限り、本文はくっきりさせておきましょう。
光をアニメーションさせる場合は、アニメーションをモーション軽減の設定のチェックで囲み、動きを減らしたいと設定している人には静止したバージョンを表示しましょう。

やわらかい浮き上がり
ネオン
3Dブロック
ロングシャドウ
活版印刷
レトロなずらし
縁取り
写真の上の文字

深夜まで営業

テキストシャドウを作る

プリセット

プレビューのテキスト

文字色

背景

サイズ

太さ

レイヤー（{n}）

レイヤーを追加

ぼかし

不透明度 %

色

レイヤー{n}を削除

削除

CSSをコピー

Tailwindのクラスをコピー

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

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