CSSグラデーション生成

CSSグラデーションはブラウザが自分で描く画像なので、どんなサイズでもくっきり表示され、ダウンロードも不要です。このジェネレーターは、カラーストップから線形・円形・円錐形のグラデーションを書き出します。ストライプの繰り返しや、中間が濁った灰色になるのを避けられる新しいCSS Color 4の補間（in oklch、in oklab）にも対応し、コピーするCSSそのままをお使いのブラウザで描いたプレビューを表示します。

使い方

1. プリセットを選ぶか、「カスタム」のまま1行に1つ、色と任意の位置を入力します。
2. 線形・円形・円錐形のどれかを選び、角度または中心を決めます。
3. ストライプにするなら「繰り返し」にチェックを入れ、必要なら補間方法を選びます。
4. CSSブロックをコピーしてスタイルシートに貼り付けます。プレビューはそのコードが描くとおりです。

計算式

linear-gradient(<angle> [in <space>], <color> <pos>, …) · radial-gradient(<shape> at <position>, …) · conic-gradient(from <angle> at <position>, …)

角度はCSSの規則で、0degが上向き、90degが右向きです。位置を2つ書いたストップ（red 10px 20px）はくっきりした帯になります。位置を書かなければ、ブラウザがストップを等間隔に並べます。

計算例

既定のストップ #ff7e5f 0% と #feb47b 100% を90°で使うと background-image: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); になります。左のコーラルから右のピーチへ移り変わり、代替の行として background-color: #ff7e5f; も出力されます。