CSSグラデーションジェネレーター

美しいCSS線形および放射状グラデーションを視覚的に作成します。

データはデバイスから出ません

カラーストップ

CSSコード

CSSグラデーションについて

CSSグラデーションを使用すると、画像を使用せずに、2つ以上の色間のスムーズな遷移を表示できます。ブラウザによって生成されるため、任意の解像度に完全にスケールし、ページの読み込みに重みを追加しません。グラデーションは、linear-gradient()またはradial-gradient()関数を使用してbackgroundプロパティで定義されます。

CSSグラデーションの簡単な歴史

CSSグラデーションはCSS Image Values and Replaced Content Module Level 3で定義されており、W3C CSS Working Groupによって維持され、Tab Atkins Jr.、Elika J. Etemadなどによって編集されています。First Public Working Draftは2011年7月12日でした; 仕様は2012年4月17日にCandidate Recommendationに到達し、モダンな接頭辞なしの構文をロックしました。これには、0degが上向き(上に向かって)を指し、to rightが90degに等しいという慣例が含まれます。ブラウザの出荷順序: WebKitが大きな差で最初で、-webkit-gradient()はSafari 4(2009)で関数呼び出しが多い構文を使用して利用可能でした。Firefoxは2010年1月21日のFirefox 3.6で-moz-linear-gradient()を出荷しました; Internet Explorer 10は2012年に接頭辞なしの形式を出荷しました; 接頭辞なしの構文は2013年後半までにすべての主要エンジン間で安定しました。conic-gradient()は後にCSS Images Level 4で仕様化され、Lea Verouが2011年に提案を起草し、Tab Atkinsが2012年に仕様に追加し、ネイティブ出荷はChrome 69(2018年9月4日)、Safari 12.1(2019年3月25日)、Firefox 83(2020年11月17日)で到着しました。2026年では、サポートする価値のあるどのブラウザでも、接頭辞なしでフォールバックなしでbackground: linear-gradient(...)とbackground: radial-gradient(...)を自信を持って書くことができます。

linear-gradient: 角度、側面、そして対角線の微妙さ

形式的な文法はlinear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...)です。角度の慣習はSVG/canvasの慣習と異なるため、開発者をしばしばつまずかせます。0degはto topに等しく、グラデーションラインが上向きを指し、最後の色が上に表示されます。90degはto rightに等しい。180degはto bottomに等しい(方向が指定されていない場合のデフォルト)。270degはto leftに等しい。135degは標準的な対角線、左上から右下で、モダンなWebデザインで最も一般的なグラデーション方向です。角度が増加すると上から時計回りに回転し、数学の慣習(0が右で角度が反時計回りに増加する)とは反対で、SVGの<linearGradient>とは反対です。便利な微妙さ: to rightと90degは正方形のボックスでのみ同等です。正方形でないボックスでは、to top rightは左下隅からの対角線に正確に垂直なグラデーションラインを生成し、グラデーションが角にきれいに当たることを意味しますが、45degはアスペクト比に関係なく常に文字通り45度です。ほとんどのヒーロー背景にはこの違いは重要ではありません; 正確に整列されたデザインには重要になる可能性があります。

radial-gradient: 形状、サイズ、位置

文法はradial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...)です。2つの形状値: circle(ボックスにスケーリングされた完全な円)とellipse(デフォルト、ボックスのアスペクト比に引き伸ばされる)。サイズは4つのextentキーワードの1つ、または明示的な長さ/パーセンテージにできます。closest-side: 終了形状が最も近い側に触れます。closest-corner: 終了形状が最も近い角を正確に通過します。farthest-side: 終了形状が最も遠い側に触れます。farthest-corner(デフォルト): 終了形状が最も遠い角を通過します。at <position>節は中心を移動します、at top left、at 30% 70%など。デフォルトの中心はat center centerです。放射状グラデーションは、スポットライト効果、ソフトグロー、エッジが黒に向かって暗くなる「ビネット」背景、円形バッジ背景を作る方法です。2026年の本番使用では線形グラデーションよりも顕著に一般的ではありません、ランディングページで見るほとんどの「グラデーション」背景は線形ですが、線形が届かないケースには不可欠です。

カラーストップ、グラデーションの中心

カラーストップは、グラデーションラインに沿ったオプションの位置を持つ色値です。linear-gradient(red, blue)は赤を0%に、青を100%に配置し、その間にスムーズな補間があります。linear-gradient(red 0%, yellow 50%, blue 100%)は中央に黄色のストップを追加します。明示的な位置のストップは0%から100%のどこにでも配置でき、明示的な位置のないストップは明示的な位置の隣人間で均等に分散されます。ハードカラーストップ、linear-gradient(red 50%, blue 50%)のような同じ位置にある2つのストップは、スムーズなブレンドではなく瞬時の遷移を生成します。これがすべてのCSSパターンの背後にあるトリックです: 縞模様、チェッカーボード、ドット、すべてハードストップでグラデーションスタックから構築されています。カラー補間ヒント(CSS Images Level 4): 2つのストップ間に裸のパーセンテージを挿入すると、補間の中点が落ちる場所がバイアスされます。linear-gradient(red, 25%, blue)は知覚的な中点をデフォルトの50%ではなく25%にシフトし、一方の色を他方より微妙に重み付けするのに便利です。モダンカラースペース補間(CSS Color Module 4、ベースライン2023+): linear-gradient(in oklch, red, blue)はガンマエンコードされたsRGBではなく、知覚的に均一なOklabカラースペースで補間し、高彩度の補色間でsRGB補間が生成する濁ったグレーの「デッドゾーン」なしに中央でよりスムーズな遷移を生成します。デフォルトはまだin oklab(または古いブラウザではin srgb)です。手作りのグラデーションには、オプトインできます。

モダンカラースペース、なぜoklchグラデーションがより良く見えるのか

20年間、すべてのCSSグラデーションはsRGB、Webが育ったガンマエンコードされたカラースペースでカラー値を補間してきました。sRGB補間にはよく知られた失敗モードがあります: 高彩度の補色間のグラデーション(赤 ↔ 緑、青 ↔ 黄、マゼンタ ↔ シアン)は濁ったグレーの中点を通過します。sRGBでlinear-gradient(red, green)を試すと、中央はあなたの目が期待する明るいオリーブではなく、茶色です。Oklab(Björn Ottosson、2020年12月)は、これを修正するために特別に設計された知覚的に均一なカラースペースです。OKLCHはOklabの円柱形で、3つの座標は明度(0-100%)、彩度(0+)、色相(0-360°)です。OKLCHのグラデーションは遷移全体にわたって知覚的にスムーズに保たれ、明るさが均等に増加し、色相がカラーホイールを予測可能に回転します。CSS Color Module 4仕様はグラデーション関数のパラメータとして<color-interpolation-method>を追加しました: linear-gradient(in oklch, red, blue)。ブラウザサポートは2023年中盤から後半にベースラインに達しました(Safari 16.4 2023年3月、Chrome 111 2023年3月、Firefox 113 2023年5月)。本番デザインシステムで使用されるグラデーションには、OKLCHオプションが正しい選択肢になることが増えています; このジェネレーターは現在sRGBデフォルトのグラデーションを出力しており、OKLCHトグルはロードマップにあります。

パフォーマンス、グラデーションは安いが、無料ではない

CSSグラデーションはすべてのモダンブラウザでGPUアクセラレートされており、ほとんどのユースケースでタイルビットマップ画像よりも劇的に高速になります、HTTPリクエストなし、デコードなし、ベクター解像度独立、CSS変数を通じて即座に再色付け可能。知っておくべきトレードオフ: ペイントコストは触れたピクセルとグラデーションの複雑さに応じてスケーリングします; グラデーションはブラウザがペイントできる最も高価なものの一つで、フルビューポートのヒーロー全体に多くのグラデーションレイヤーを積み重ねると、ローエンドGPUでフレームがかかる可能性があります。グラデーションの色をアニメーション化すると、フレームごとに完全な再ペイントがトリガーされます、transformやopacityをアニメーション化するよりもはるかに高価です。モダンな修正は、@propertyで登録されたカスタムプロパティ(Houdini Properties and Values API)を使用することで、ブラウザがメインスレッドではなくコンポジタースレッドで色値を補間できるようにします; Chrome 78+(2019年11月)、Safari 16.4+(2023年3月)、Firefox 128+(2024年7月)でサポートされています。より安価な伝統的な代替策は、固定グラデーションでbackground-positionをアニメーション化することです、これは至るところで60fpsで実行される真のコンポジターのみのアニメーションです。一般的なパフォーマンスのヒューリスティック: ページに単一の静的グラデーションがある場合、決して気付かないでしょう; 長いリストのすべてのカードに5つのアニメーション化されたグラデーションレイヤーを積み重ねている場合は、出荷前にプロファイルしてください。

グラデーションが価値を発揮する場所

正直なスコープ: このジェネレーターができることとできないこと

このツールはライブプレビュー、設定可能な角度(線形用)または位置(放射状用)、および位置付きの任意の数のカラーストップを持つ線形と放射状のCSSグラデーションを生成します。モダンな接頭辞なしの構文を出力します。このツールが現在しないこと、より精巧なジェネレーターが処理すること: 円錐グラデーション(円グラフ、サンバースト、カラーホイールに使用される、中心の周りを回転する種類)、いくつかの円錐パターンの例については、AbsolutoolのCSS Pattern Generatorを参照してください; 繰り返しグラデーション(repeating-linear-gradient、repeating-radial-gradient、repeating-conic-gradient)、縞模様やパターンスタイルの塗りつぶし用、CSS Pattern Generatorでも処理されます; OKLCH / Oklab補間トグル(モダンな知覚的に均一なカラースペース)、現在sRGBデフォルトを出力します; ストップ間の中点をバイアスするカラーヒント構文; マルチストップアニメーションキーフレーム。ほとんどの本番グラデーション(ヒーロー背景、ボタンスタイル、オーバーレイ効果)には、線形+放射状でユースケースをカバーします; よりエキゾチックなケースには、CSS Pattern Generatorが正しい補完ツールです。

よくある質問

CSSグラデーションはすべてのブラウザでサポートされていますか?

はい。CSSグラデーションは2013年以来、すべての主要ブラウザでサポートされており、世界中で98%以上のカバレッジがあります。最新の使用法には、-webkit-などのベンダープレフィックスは不要です。

対角線グラデーションにはどの角度を使うべきですか?

135度は左上から右下への対角線を作成し、最も一般的です。45度は左下から右上に向かいます。90度は左から右、180度は上から下に向かいます。

2色以上を使用できますか?

もちろんです。「ストップを追加」をクリックして、最大8つのカラーストップを追加します。各色とグラデーションに沿った位置を制御できます。複数ストップグラデーションは、より豊かでダイナミックな視覚効果を作成します。

なぜ円錐グラデーションオプションがないのですか?

円錐グラデーション(円グラフ、サンバースト、カラーホイールに使用される、中心の周りを回転する種類)は、線形および放射状グラデーションとは異なるデザイン問題です、パラメーターは線に沿った位置ではなく中心の周りの角度です。conic-gradientの例とパターンには、AbsolutoolのCSS Pattern Generatorを使用してください、これはパターンスタイルの塗りつぶしのためにより多くのエキゾチックなケース(円錐、repeating-linear、repeating-conic)を処理します。このジェネレーターは、本番ヒーローおよびボタンのグラデーションの大部分をカバーする線形+放射状のケースに焦点を当てています。

CSSグラデーションは画像背景より速いですか?

ほとんどの場合、はい、CSSグラデーションはHTTPリクエスト、デコードパス、およびretinaディスプレイに必要なマルチ解像度アセット出荷を排除します。グラデーションはどのズームでもベクター完璧で、CSS変数を通じて簡単に再色付け可能です。トレードオフ: グラデーションはGPUペイントされますが、ペイントコストはピクセル領域とストップの複雑さに応じてスケーリングします; フルビューポートのヒーロー全体に多くのグラデーションレイヤーを積み重ねると、ローエンドGPUでフレームがかかる可能性があります。アニメーションでは、グラデーションのカラーストップ(完全な再ペイント、高価)ではなくbackground-position(コンポジターのみ、安価)をアニメーション化してください。カードまたはヒーローセクションの単一の静的グラデーション、決して目立たない。

私のデータはどこかに送信されますか?

いいえ。生成はブラウザで完全に実行されます、カラーピッカー、角度スライダー、CSSコード生成はすべてローカルで実行されます。コントロールを使用するときに送信リクエストはありません。生成されたCSSはあなたのものでどこにでも貼り付けることができます。

関連ツール

カラーパレットジェネレーター

美しいカラーパレットを生成し、CSSとしてエクスポートします。

画像フィルターと効果

画像にフィルターと写真効果を適用します。

Markdownプレビュー

Markdownを書いて、レンダリングされたプレビューをライブで表示します。