すべての処理はブラウザ内で実行されます — ファイルや入力はサーバへ送信されません。
グラデーション種別(線形 / 放射状)を選び、グラデーションバー上でカラーストップをドラッグして位置を調整します。クリックでストップを追加・削除、ピッカーで色を変更、線形グラデーションは角度ハンドルのドラッグや度数の直接入力で回転できます。CSS パネルは現代の `linear-gradient(angle, color stop, ...)` 構文で `background:` 宣言を出力し、スタイルシート、Tailwind の `bg-[...]` 任意値、CSS-in-JS のテンプレートリテラルにそのまま貼り付けられます。
ヒーローセクションの背景、ボタンのホバー状態、プレースホルダ画像、カードのアクセントなどを設計するときに使ってください。現代のウェブデザインは、2010 年代後半に流行した 4 ストップや放射状 + コニックの派手なパターンよりも、控えめな 2 ストップグラデーションを好みます。それでも適切なグラデーションは、フラットな単色では出せない奥行きを与えます。ライブプレビューは現代の主要ブラウザがレンダリングする結果(CSS Images Module Level 3 準拠)に一致します。古い `-webkit-` / `-moz-` プレフィックスは、ブラウザのバージョン要件がすべて 2017 年以降に移行したため、もはや不要です。
type: linear angle: 135deg stops: #1e293b 0%, #0f172a 100%
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
現代的な「テックダーク」のヒーロー背景です。135° は左上から右下へ走り、ほとんどのレイアウトに最も馴染む対角線方向です。2 つのストップは近接したスレートの陰影で、前景コンテンツと競合せずに奥行きを与えます。Tailwind ユーザは任意値として `bg-[linear-gradient(135deg,#1e293b_0%,#0f172a_100%)]` のように貼れます — Tailwind の値パーサが空白で分割するため、空白はアンダースコアに置き換えてください。
type: linear angle: 180deg stops: #ff4b1f 0%, #ff9068 40%, #ffd29d 70%, #fff5e1 100%
background: linear-gradient(180deg, #ff4b1f 0%, #ff9068 40%, #ffd29d 70%, #fff5e1 100%);
縦方向のサンセット効果 — 上部のオレンジが下に向かってクリーム色にフェードします。等間隔でないストップ(0% / 40% / 70% / 100%)が上部の明るいオレンジを圧縮し、底部のクリームを広く平坦な領域へ引き伸ばしており、実際の空のグラデーションに似ています。多ストップグラデーションは挿絵的な背景や装飾バナーに向きますが、コンテンツ背景には不向きです — 賑やかさが本文の可読性と衝突します。
type: radial shape: circle at center stops: rgba(255,255,255,0.4) 0%, transparent 70%
background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
アルファ付きストップを使う放射状グラデーションは、任意の背景に重ねられる「スポットライト」効果を生みます。`radial-gradient(circle at center, ...)` はハイライトを中央に、`at top right` ならフォーカスをずらせます。カンマ区切りの複数レイヤーでベース背景と組み合わせられます — `background: radial-gradient(...) , linear-gradient(...)`。最初のグラデーションが上に乗り、アルファによって下のレイヤーが透けて見えます。
`0deg` は「to top」を意味し、グラデーションは底から始まり上で終わります。CSS のグラデーション角度はそこから時計回りに回り、`90deg` は「to right」(左 → 右)、`180deg` は「to bottom」(上 → 下)、`270deg` は「to left」です。数学の慣例(0° は右、反時計回りが正)とは異なりますが、「上が北」と考える人の直感に合っています。基本方位と中間方位には度数の代わりに `to top`・`to right`・`to bottom left` などのキーワードも使えます。
不要です。プレフィックスなしの `linear-gradient` / `radial-gradient` は 2017 年以降すべての主要ブラウザで対応しています(Chrome 26、Firefox 16、Safari 7、Edge は登場時から)。caniuse の基準が 2017 年第 3 四半期以降ならプレフィックスは外せます。例外は **conic-gradient** 関数で、ブラウザ別に 2019〜2021 年に出揃いました。レガシーブラウザのフォールバックには、conic より前にプレフィックスなしのソリッドカラーや線形グラデーションをレイヤーとして置けば、ブラウザは理解できるものを使います。
CSS グラデーションは既定で sRGB 色空間で補間しますが、sRGB はガンマエンコードされています。青(`#0000FF`)と黄(`#FFFF00`)の中間は sRGB では濁ったグレー(`#808080`)になり、知覚が期待する鮮やかな中間色にはなりません。対処法は `linear-gradient(in oklab, blue, yellow)`(CSS Color Module Level 4、Chrome 111 以降・Firefox 113 以降・Safari 16.4 以降で対応)を使うことで、知覚的に均等な空間で補間されるため鮮やかな緑が中点に現れます。古いブラウザには、中間ストップを手動で追加してください — `blue 0%, #00b487 50%, yellow 100%`。
CSS の `transition` や `@keyframes` で 2 つの `linear-gradient` 値の間を直接補間することはできません。グラデーションは画像扱いで、ブラウザは不透明な単位として扱うためです。代替策として、大きめのグラデーション画像で `background-position` をアニメーションさせる、`background-size` をアニメーションさせる、CSS カスタムプロパティと `@property` を組み合わせてグラデーションストップをアニメーション可能な色として宣言する、などがあります。複雑なアニメーションには `<animate>` を持つ SVG の `<linearGradient>` や、canvas / WebGL レンダリングが完全な制御を提供します。ホバー状態の静的グラデーションは `background-image` のスワップとして動きますが、入れ替えは即時で、フェードはありません。
現代のハードウェアでは、静的なグラデーションは単色と測定可能な差はありません。GPU はグラデーションを 1 度レイヤーに描き、結果を再利用します。グラデーションストップのアニメーションや `background-position` のスライドはフレームごとのコストが増えるため、フルページ背景ではなく小さい要素(ボタン・バッジ)に留め、`will-change: background-position` でコンポジタにヒントを与えてください。高コストになるのは、ブラウザが頻繁に再描画する要素(スクロール連動やレイアウトのスラッシングを伴うアニメーション)上にグラデーションが乗る場合です。重いグラデーションが遅いスクロール経路にあるなら DevTools でプロファイルしてください。
コニックグラデーション(`conic-gradient(red, yellow, green, blue, red)`)は中心点の周りで色を回転させます — 円グラフや時計の文字盤のような感じです。実用例: SVG なしのプログレスリング(`conic-gradient(blue 0% 60%, gray 60% 100%)` で 60% 進捗を表示)、角を回るグラデーションボーダー(`mask` と組み合わせ)、ホログラフィックフォイル風のコニック背景などです。CSS 対応は Chrome 69 以降・Firefox 83 以降・Safari 12.1 以降で、2021 年以降は普遍的です。本ツールは線形と放射状に焦点を絞っています。コニックグラデーションは手で構文を書くか、専用のコニックエディタを使ってください。
CSS グラデーションは関数(`linear-gradient(...)`・`radial-gradient(...)`・`conic-gradient(...)`)から生成される *画像* であり、単色ではありません。`background-image` と同じプロパティスロットに置かれ、カンマで重ねられ、ラスター画像と同じブレンドモードやマスクプロパティに従います。CSS Images Module Level 3(W3C 勧告、2017 年)が線形と放射状を標準化し、Level 4(ワーキングドラフト、2018 年以降)がコニックと、CSS Color Module Level 4 と組み合わさる `in <color-space>` 補間ヒントを追加しました。
**3 つのグラデーション関数** はほぼすべてのユースケースをカバーします。**線形** は任意の角度の直線に沿って走り、`to <side>` キーワードや `<angle>deg` 構文で線の向きを示し、線上のストップが色の遷移を定義します。**放射状** は中心点から外に向かって走り、`circle` / `ellipse`、`at <position>`、サイジングキーワード(`closest-side`・`farthest-corner` など)で形を定めます。**コニック** は中心点の周りで色を回転させ、SVG を使わずに円グラフ・プログレスリング・回転効果を作れます。どの関数も同じカラーストップ構文(`color percent`、パーセンテージを省略すれば等間隔)を受け入れます。
グラデーション設計に関わる隣接概念が 3 つあります。**色補間** は歴史的に sRGB のみで、色相が大きく離れた色を跨ぐと中点が濁る問題が出ます。CSS Color Level 4 の `in oklab` や `in oklch` 補間ヒント(Chrome 111 以降・Firefox 113 以降・Safari 16.4 以降)がこれを解消します。**パフォーマンス** は静的グラデーションでは GPU が加速しますが、レイアウトを乱すアニメーションでは高コストです — ストップ色を直接ではなく `background-position` をアニメーションしてください。**アクセシビリティ** は見落とされがちな観点で、テキスト背後のグラデーションは単色背景と同じ WCAG 4.5:1 コントラストを必要とし、しかも視認領域全体でその比率を保つ必要があります。「最も重なりそうなゾーン」だけではなく、グラデーションの両端に対してコントラストチェッカーで確認してください。
background: linear-gradient(135deg, #06b6a4 0%, #3b82f6 100%);
