CSS グラデーションエディターは、線形・放射・円錐の 3 種類のグラデーションを多層スタッキング・15 種類の色空間補間・ワンクリックの CSS コード出力に対応したビジュアルデザインツールです。OKLCH や Display P3 などの現代的な色空間をサポートし、基本的なグラデーションジェネレーターを超えた知覚的に滑らかな色の遷移を実現します。
3 種類のグラデーションタイプと用途
- 線形（
linear-gradient）— 角度ダイヤルで制御できる直線方向（0°〜360°）に色が遷移します。ページのセクション背景やボタン塗りに最も多く使われます - 放射（
radial-gradient）— 中心点から外側に色が放射します。中心位置・形状（円または楕円）・サイズを調整できます。スポットライト効果やボタンハイライトに適しています - 円錐（
conic-gradient）— 開始角度から中心点を軸に色が回転します。円グラフ・進捗リング・カラーホイールセレクターに自然にマッチします
多層スタッキングの仕組み
レイヤーはリストの上から下の順でレンダリングされます。上のレイヤーが先にレンダリングされ、各レイヤーの透明度（opacity）によって下のレイヤーがどれだけ透けて見えるかが決まります。各レイヤーのグラデーションタイプ・カラーストップ・位置は完全に独立しています。
レイヤーを増やすほど生成される CSS が長くなります。モバイルでは低電力デバイスの重いレンダリングを避けるために 1〜2 レイヤーに抑えることをお勧めします。
カラーストップの操作：グラデーションバーをクリックしてストップを追加し、ドラッグして位置を調整します。ストップを選択すると色の値（hex・rgb()・lch()・oklch() などに対応）と不透明度を編集できます。CSS グラデーションには最低 2 つのカラーストップが必要で、エディターはその最小数を下回る削除を防ぎます。
色空間の選び方
まず試すべき色空間
- sRGB — 最も幅広いブラウザ対応、本番環境のファーストチョイス
- OKLCH — 知覚的に均一。赤から青への遷移で暗いグレーの中間色が生まれない
- HSL / HWB — 極座標空間。色相の遷移が自然で sRGB の「中間グレー問題」を回避できる
広色域オプション
- Display P3 — sRGB より約 25% 広い色域。P3 対応ディスプレイ（最新の iPhone・Mac）でのみ違いが見える
- Rec. 2020 — 超広色域、一般ディスプレイでは sRGB との差がほぼない
- ProPhoto RGB — 印刷ワークフロー専用
極座標色空間（HSL・HWB・LCH・OKLCH）には色相補間方向オプションも表示されます：最短経路（デフォルト）・最長経路・昇順・降順。これはカラーホイール上で色相がどちらの方向に回転するかを制御し、グラデーション途中で予期しない色のジャンプを防ぎます。
ブラウザ互換性について
color-interpolation-method 構文（色空間と色相補間を指定するための CSS Color Level 4 機能）は Chrome 111+・Safari 16.2+・Firefox 113+ で完全にサポートされています。ターゲットユーザーに古いブラウザが含まれる場合は sRGB をベースラインとして使用し、グラデーションがどのように劣化するかをテストしてください。現在のブラウザが使用中の色形式をサポートしていない場合、ツールが警告を表示します。