グラデーション生成ツール

グラデーションツールは、Web UI、背景、ボタン、グラフ、デザイン試作に使う CSS グラデーションを作成するためのツールです。linear-gradient や radial-gradient の値を手書きせずに、色、カラーストップ、方向、角度、透明度を確認しながら調整できます。ブランドカラーに合わせたい場合、文字の読みやすさを保ちたい場合、状態変化を自然に見せたい場合に便利です。生成される CSS は実装手段であり、重要なのは十分なコントラストと画面上で邪魔にならない色のつながりを選ぶことです。

CSSグラデーションは色ではなくイメージ値です。linear-gradient()、radial-gradient()、conic-gradient()はbackground-image、mask-image、border-imageスロット内でブラウザがラスタライズする<image>トークンに解決されます。線形形式は角度（0degは上向き、90degは右向き、時計回りに増加）またはボックスの対角線から計算される'to <side>'キーワードを受け取り、その後にオプションのパーセンテージまたは長さの位置を持つカンマ区切りのカラーストップリストが続きます。放射形式は形状（circle | ellipse）、サイズキーワード（closest-side、farthest-cornerがデフォルト）、および'at <position>'アンカーを受け入れます。円錐形式は'from <angle>'から始まるハブを中心にストップをスイープし、Chrome 69+、Safari 12.1+、Firefox 83+でサポートされています。<br /><br />色の補間のデフォルトはsRGBで、知覚的に均一ではなく、青と黄のような離れた色相間に濁ったグレーバンドを生成します。CSS Color Level 4では'in <colorspace>'構文による明示的な色空間が導入されました。'in oklch'、'in lab'、'in srgb-linear'、'in hsl longer hue'により、スペクトル全体で彩度を維持した遷移が可能になります。ハードカラーバンドは2つのストップに同じ位置を指定することで生成され（'red 50%, blue 50%'）、カラーヒントはストップを挿入せずに中間点をシフトします（'red, 20%, blue'）。<br /><br />グラデーションをCSSパイプラインから出す必要がある場合、Canvasは同じプリミティブを提供します。CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1)、createRadialGradient(x0, y0, r0, x1, y1, r1)、createConicGradient(startAngle, x, y)はCanvasGradientオブジェクトを返し、addColorStop(offset, color)を受け入れてfillStyleに代入後、toDataURL('image/png')でエクスポートできます。SVGはマークアップの等価物として<linearGradient>と<radialGradient>を提供し、spreadMethodの値'pad'（デフォルト）、'reflect'、'repeat'でタイリング動作を制御します。

• 線形形式: linear-gradient(<angle> | to <side-or-corner>, <color-stop>+) -- 0degは上向き、時計回りに増加。'to bottom right'はボックスサイズから計算され、文字通りの135degではない
• 放射形式: radial-gradient([<shape> <size>]? at <position>, <stops>) -- サイズキーワード closest-side、closest-corner、farthest-side、farthest-corner（デフォルト）
• 円錐形式: conic-gradient(from <angle> at <position>, <stops>) -- ハブを中心にスイープ。Chrome 69+、Safari 12.1+、Firefox 83+
• 色補間: CSS Color Level 4の'in oklch | lab | srgb-linear | hsl shorter|longer hue'が、離れた色相間でグレーバンドを引き起こす知覚的に不均一なsRGBデフォルトをオーバーライド
• ハードストップとヒント: 同一位置の2ストップ（'red 50%, blue 50%'）でシャープなバンドを生成。裸のパーセンテージ（'red, 20%, blue'）はカラーヒントで50%混合ポイントを移動
• Canvas API: createLinearGradient(x0,y0,x1,y1)、createRadialGradient(x0,y0,r0,x1,y1,r1)、createConicGradient(angle,x,y)がCanvasGradientを返却。addColorStop(offset, color)でfillStyleに代入
• SVG等価物: <linearGradient>と<radialGradient>、spreadMethod='pad'|'reflect'|'repeat'でグラデーション境界外のタイリングを制御