CSSグラデーション生成（線形・放射状・円錐）

CSSの3種類のグラデーション

線形（linear）: 指定した角度に沿って色が直線的に変化。0°が上向き、90°が右向き（標準的な読み方向）、180°が下向き。背景・ボタン・ヒーローセクションに最も多く使われる。

放射状（radial）: 中心点から外側に向かって色が変化。形状は円（既定）または楕円。スポットライト効果・太陽のような要素・注目を集める中央配置に最適。

円錐（conic）: 中心点を軸に色が回転、カラーホイールのよう。少し珍しいが、円グラフ・時計盤・装飾的なスピナー等に強力。2020年以降の主要モダンブラウザで対応。

カラーストップとパーセンテージ

各ストップは色と0〜100%の位置を持ちます。0%がグラデーションの開始、100%が終了。2ストップで滑らかな2色グラデーション。3ストップ目を中間に置くと、3色ブレンドや配置によっては明確な帯ができます。

急峻な変化（混色なし）には、同じ位置に異なる2色のストップを置きます。例: '#000 50%, #fff 50%'は中央で黒から白へ鋭く分割。「ストライプ」背景の作り方。

パフォーマンスとアクセシビリティ

グラデーションは画像と異なりHTTPリクエスト不要でネイティブ描画。無限に拡大しても画質劣化なし。アニメーションも可能（background-positionをトランジションさせるか、CSSカスタムプロパティとJavaScriptでストップを変化）。

アクセシビリティ: 複雑なグラデーション上に直接テキストを置く際は、コントラストがグラデーション全体で十分か確認。フラット色のオーバーレイを使うか、グラデーションの平均明度がテキストと十分対比するように。コントラストチェッカーで確認可能。WCAG AAは通常テキスト4.5:1、大テキスト3:1を要求。