CSSテキストグラデーションジェネレーター

使い方

1. 色を選択: ピッカーを使ってグラデーションの2色以上を選択します。
2. 角度とスタイルを調整: 線形または放射状グラデーションを選択し、角度を調整し、オプションでカラーストップ位置を追加します。
3. CSSをコピー: 生成されたCSSコードはbackground-clip: textと-webkit-background-clip: textを使用してテキストグラデーション効果を実現します, スタイルシートに直接コピーします。

なぜテキストグラデーションジェネレーターを使うのか?

テキストグラデーションは、見出し、ロゴ、コールトゥアクションテキスト用の最も人気のあるモダンなCSS効果の1つです。それを得るには、見落としやすい特定のCSSプロパティの組み合わせ(background、background-clip、-webkit-text-fill-color)が必要です。このジェネレーターはクロスブラウザ構文を自動的に処理し、コードを書く前にグラデーションを完璧にするためのライブプレビューを提供します。

機能

• 複数のカラーストップ: 複雑なグラデーション効果のために必要な数だけカラーストップを追加します。
• 線形と放射状: 方向性のある線形グラデーションと中心の放射状グラデーションから選択します。
• 角度コントロール: 視覚的なダイヤルでグラデーションの角度を0°から360°に設定します。
• ライブプレビュー: サンプルでテキストグラデーションがリアルタイムで更新されるのを確認します。
• クロスブラウザCSS: 出力には最大限の互換性のために-webkitプレフィックスとフォールバックソリューションが含まれています。

よくある質問

CSSテキストグラデーションはどのように機能しますか?

CSSテキストグラデーションは、要素の背景としてグラデーションを適用し、background-clip: textでその背景をテキストの形状にクリップし、-webkit-text-fill-color: transparent(またはcolor: transparent)でテキストの色を透明にすることで機能します。グラデーションのテキスト形状の切り取りのみが見えます。

テキストグラデーションはすべてのブラウザで機能しますか?

CSSテキストグラデーションはすべての最新ブラウザ, Chrome、Firefox、Safari、Edge, で機能します。-webkit-background-clip: textプロパティはよくサポートされています。非常に古いブラウザ用に常にcolorプロパティを介して単色のフォールバックを計画してください。

任意のフォントサイズでこれを使用できますか?

はい。テキストグラデーションはフォントサイズに完全に適応します, 画像ではなく純粋なCSSなので、高密度ディスプレイを含む任意の解像度で鮮明なまま保たれます。

ウェブ上のグラデーションテキストの短い歴史

グラデーションテキストは、WebKitの-webkit-background-clip: textプロパティでウェブ上に視覚的に可能になりました。これは2008年にWebKitチームによって提案された実験的なSafari/Chromium拡張機能で、テキストのグリフ形状を任意の背景（グラデーション、画像、何でも）で塗りつぶす方法として提案されました。この技術は何年も非公式のままでした:Firefoxはバージョン49(2016年9月)でようやくプレフィックスなしのbackground-clip: textを出荷し、CSS Backgrounds Module Level 4は2018年頃からW3Cワーキングドラフトとして正式化されました。基礎となるグラデーション構文は別個に成熟しました。CSS Images Module Level 3(W3C推奨2017年)はlinear-gradient()とradial-gradient()を第一級の画像値として標準化しました;conic-gradient()はModule Level 4で続きました(Chrome 69 2018年9月、Safari 12.1 2019年3月、Firefox 83 2020年11月)。これら2つの仕様の組み合わせが、今日の1行グラデーション見出しを可能にしています。Tailwind CSSがv1.4(2020年)でbg-clip-textユーティリティクラスを出荷したとき、開発者コミュニティでの採用が爆発的に増え、グラデーション見出しがドロップイン原始としてのものになりました。現代のブランドアイデンティティは今や視覚的なシグネチャとしてグラデーションテキストに依存しています:Stripeの「Bridges」ヒーロー、Linearのグラデーションロゴタイプ、Vercelのランディングページ、AppleのWWDCマーケティング、Notionのテンプレートストアすべてがこの技術を使用しています。組み合わされたbackground-clip: text + グラデーションパターンは、2005-2015年のウェブデザインを支配した「スタイル化された見出しのPNG」を効果的に置き換え、一気にアクセシビリティとパフォーマンスの問題のカテゴリを削除しました。

CSSグラデーションテキストの解剖学

• グラデーション自体。background-image: linear-gradient(90deg, #f00, #00f)は要素の背景を赤から青へ走る90度のグラデーションに設定します。グラデーションは線形(方向性)、放射状(中心)、円錐形(回転スウィープ)、または繰り返しバリエーションのいずれかになります。CSSグラデーションは色の値ではなく画像の値であり、それがテキスト形状にクリッピング可能にしているものです。
• background-clip: text。ブラウザにレンダリングされたグリフのジオメトリ内でのみ背景をレンダリングするよう指示します。この単一のプロパティがないと、グラデーションは要素ボックス全体を塗りつぶします;それがあれば、グラデーションはテキストの輪郭に制限されます。元々は-webkit-background-clip: textとしてプレフィックス付きのWebKit拡張でしたが、現在はFirefox 49+(2016)とChromiumベースのブラウザでもプレフィックスなしです。
• color: transparentまたは-webkit-text-fill-color: transparent。背景がテキストにクリッピングされたら、表示される結果はテキスト自体が背景の上に塗る色に依存します。color: transparent(またはプレフィックス付きの-webkit-text-fill-color: transparent)を設定するとグラデーションが透けて見えます。これがないと、ソリッドなテキスト色が単純にクリッピングされたグラデーションの上に塗られてしまいます。
• -webkit-プレフィックスチェーン。Safariは最も蓄積されたプレフィックスの歴史を持つプラットフォームで、プレフィックスなしのプロパティを解析しますが、レガシーの理由でプレフィックス付きバージョンは本番コードに残っています。このジェネレーターの出力はbackground-clip: textと-webkit-background-clip: textの両方を含むため、テクニックがSafari 14およびあらゆるレガシーWebKitベースのブラウザに遡って動作します。
• グラデーションタイプとストップ。linear-gradient(angle, color1, color2, ...)は方向に進みます;radial-gradient(shape at position, ...)は点から放射します;conic-gradient(from angle at position, ...)は時計の針のように周りを掃きます。それぞれが任意の数の色のストップを受け入れ、明示的な位置(red 0%, blue 50%, green 100%)で各色の開始と終了を細かく制御できます。

実世界のグラデーションテキストパターン

• ブランドアイデンティティの見出し。Stripeの「Bridges」シリーズ、Linearのプロダクトヒーロー、Vercelの「Develop. Preview. Ship.」バナーすべてがブランドシグネチャとしてグラデーションテキストを使用しています。単色のワードマークは初期段階のSaaSにとっては時代遅れに感じられますが、グラデーション見出しは「2024年に構築」の視覚的合図を運びます。
• ヒーローセクションの見出し。ランディングページのH1は多くの場合、最高のデザイン予算を持つ単一のテキスト要素です。グラデーションテキストは、カスタムフォントファイル、SVG、またはヒーロー画像に頼ることなく視覚的な重みを与えます。これらはすべてページの重さとアクセシビリティの懸念を追加します。
• 大きな数字のメトリックページ。価格ページ(「$0で開始」)、統計コールアウト(「10倍速い」)、ダッシュボードサマリーは、数字自体に目を引くためにグラデーションテキストを使用します。グラデーションは古いデザインの「数字の後ろの色付きの円」パターンを効果的に置き換えます。
• コール・トゥ・アクションボタン。CTAテキスト上の微妙なグラデーション(ボタンの背景ではなく)は、単色よりも洗練されて見え、グラスモーフィズムまたはニューモーフィックボタン表面とよく組み合わさります。この技術はフィンテックとデザインツールのブランドで一般的です。
• ナビゲーションハイライト。ナビゲーションリンク上のアクティブまたはホバー状態は、下線または背景色の変更を追加せずに視覚的フィードバックを提供するためにグラデーションテキストを使用できます。このパターンはドキュメンテーションサイト(Stripe Docs、Tailwind Docs)で大量に使用されています。
• ダークモードとブランドブリッジデザイン。グラデーションテキストは、彩度の高い色が忙しい明るい表面と競合せずに目立つため、暗い背景で特にうまく機能します。多くの製品はライトモードでは単色の見出しを維持し、ダークモードでグラデーションに切り替えます(CSS変数スワップを使用)。
• Eコマース製品のコールアウト。「セール」、「新着」、「限定版」バッジと製品サブタイトルは、アイコンアセットを必要とせずに本文と差別化するためにグラデーションテキストを使用します。Shopifyのストアフロントエディタは、2024年にグラデーションテキストを組み込みオプションとして提供しています。

アクセシビリティの考慮事項

• WCAG 2.1 SC 1.4.3コントラスト(最小)。成功基準は通常のテキスト(18pt+または14ptボールドとして定義される大きなテキストの場合は3:1)のテキストと背景の間に少なくとも4.5:1のコントラストを必要とします。グラデーションテキストはコントラスト比がグラデーション全体で変化するため評価が困難です。安全なアプローチ:グラデーションの最も明るい色が背景に対する比率を満たしていることを確認します。WebAIM Contrast CheckerやFigmaのStarkなどのツールが役立ちます。
• 最初に最も暗いグラデーションの色を選択します。明るい背景とグラデーションをペアにする場合、4.5:1の比率をクリアするためにグラデーションの最も明るい色を選ぶことで、グラデーションの残りもアクセス可能であることが保証されます。暗い背景では逆も同様です。WCAG 2.2(2023年10月の推奨)は、テキストのコントラストがランごとに変化する場合を含め、視覚的提示に関するガイダンスを引き締めました。
• スクリーンリーダーはテキストを変更されていないものとして見ます。グラデーションは純粋に視覚的なスタイリング(background-clip、color)なので、支援技術はそれがどのように色付けされていても、レンダリングされたテキスト内容を読み取ります。ラスタライズされた画像テキストやSVGテキスト要素なしのSVGテキストとは異なり、グラデーションテキストには「代替テキスト」の懸念はありません。
• prefers-reduced-motion。アニメーション化されたグラデーション(background-position遷移、色サイクルアニメーション)は、前庭障害や動きへの感受性のあるユーザーが静的なグラデーションを見るように、@media (prefers-reduced-motion: no-preference)でラップする必要があります。CSS Working Groupは2017年にメディアクエリを追加しました;ブラウザサポートは2020年以来普遍的です。
• ブラウザのズームとテキストのサイズ変更。WCAG 2.1 SC 1.4.4は、コンテンツの損失なしにテキストを200%までサイズ変更できることを要求します。グラデーションテキストは純粋にCSSでレンダリングされ(ラスタライゼーションなし)、完全にスケールします。Ctrl+/Cmd+ズームを使用する弱視のユーザーは、どのズームレベルでもグラデーションが鮮明に保たれているのを見ます。
• 印刷スタイルシート。印刷ページは紙のインクを期待するため、ほとんどのブラウザは印刷時に背景クリップされた色を削除し、グラデーション背景が消えます。常に@media printオーバーライドを提供し、グラデーションテキストにソリッドなcolorを設定して、印刷されたコピーが読みやすいままにします。多くのデザイナーがこれを忘れます;グラデーション見出しを印刷すると、しばしば見えないテキストが生成されます。
• フォールバックカラーチェーン。常に最初にソリッドなcolorプロパティを設定し、次にcolor: transparent(または-webkit-text-fill-color: transparent)を追加して、background-clip: textサポートのないブラウザ(レガシーIE、非常に古いAndroidブラウザ)が見えないテキストではなくソリッドカラーテキストを見るようにします。ジェネレーターの出力にはこのフォールバックがデフォルトで含まれています。

その他のよくある質問

なぜグラデーションテキストは現代のブランドシグネチャと考えられているのですか?

2つの理由。まず、技術的理由:グラデーションテキストは2017-2020年頃まで完全にクロスブラウザになりませんでした。したがって、それを使用するデザインは「最近構築された」視覚的合図を目に見えて運びます。フラットデザインが「2013」と言ったり、スキューモーフィズムが「2010」と言ったりするのと同じ方法で。次に、文化的理由:Stripe、Linear、Vercel、Apple WWDCは、フィンテックと開発者ツールのマーケティングの2020-2024年の波で、グラデーションテキストをブランドアイデンティティ要素として普及させました。同じ視覚言語を採用することは、そのデザインの系譜への所属を示します。

グラデーションテキストエフェクトをどのようにアニメートしますか?

最も一般的な技術は、サイズが大きいグラデーションでbackground-positionをアニメートします。background-size: 200% 200%を設定し、3-5秒のループでbackground-positionを0% 0%から100% 100%にアニメートします。動きに敏感なユーザーが静的バージョンを見るように、常にキーフレームを@media (prefers-reduced-motion: no-preference)でラップします。個々のカラーストップを直接アニメートすることは避けます:CSSは現在、ブラウザ間でグラデーション値間をスムーズに補間しませんが、CSS @property(W3C候補推奨2022)はこれを有効にし始めています。

検索エンジンとスクリーンリーダーはグラデーションテキストを見ることができますか?

はい。グラデーションテキストはCSSでスタイル化された純粋なHTMLテキストです;DOMにはまだ実際の文字が含まれています。Google、Bing、スクリーンリーダー(NVDA、JAWS、VoiceOver)、およびテキスト抽出ツールはすべて、それが普通の単色テキストであるかのように内容を正確に読み取ります。これは、グラデーションCSSテキストが古い「スタイル化された見出しのPNG」パターンを置き換えた主な理由の1つです:それらの画像は、手動の代替テキストなしには検索とスクリーンリーダーに見えませんでした。

グラデーションテキストはHTMLメールで動作しますか?

ほとんど動作しません。Outlookデスクトップ(Wordレンダリングエンジン)はbackground-clipを取り除きます;Gmailのウェブクライアントは一貫してサポートしていません;Apple Mailと現代のGmailモバイルクライアントは通常正しくレンダリングします。メールキャンペーンの場合、より安全なアプローチは、フォールバックの単色見出しを出荷し、グラデーションテキストをそれをサポートするクライアントの「プログレッシブエンハンスメント」として扱うことです。いくつかのチームは、代替テキスト付きのPNG/SVGとして見出しを事前構成し、アクセシビリティのトレードオフを受け入れます。

テキストグラデーションでどの色が最もよく合いますか?

3つのパターンが支配的です。類似色(ホイール上で隣接する色、例:青→紫→ピンク)は、ブランドに優しい滑らかな結果を与え、ほとんどの現代のデザインシステムのデフォルトです。補色(ホイール上の反対側、例:青→オレンジ)は強いコントラストを作りますが、長いテキストでは派手に見えることがあります。ブランド調色(プライマリブランド色を明度/彩度の微妙なバリエーションで)、装飾的というよりも統合された感覚の洗練された効果を生み出します。1つの見出しに3つ以上の色を混ぜることは避けてください;複雑なグラデーションは、アイコンやグラフィック要素のために予約しておくのが最善です。