Web向けにCSSグラデーションを組み立てる
このジェネレーターでできること
CSSグラデーションは2色以上を形状の上でなめらかに混ぜ合わせるもので、このジェネレーターはその配色を、構文を手書きせずに貼り付けられるCSSへと仕上げます。グラデーションの種類を選び、カラーストップを追加すると、対応するbackgroundルール（linear-gradient()またはradial-gradient()関数）が自動で組み立てられ、操作したその瞬間にライブプレビューへ反映されます。
各カラーストップは、色・軌道上の位置（パーセント）・不透明度をそれぞれ持つため、ある色から次の色へ切り替わる位置を細かく決められます。プリセットは白紙のキャンバスではなく、微調整できる完成したパレットを渡してくれます。
使いどころ
単色の塗りが物足りないときに役立ちます。ヒーロー背景、ボタン、カード、バッジ、オーバーレイの色被せは、控えめな色の移り変わりを加えるだけで見栄えが良くなります。デザイナーは数秒で見た目を試作でき、開発者は角度キーワードやパーセントの規則を覚えなくても正しい構文を手に入れられます。
既存のグラデーションを再現したいときにも力を発揮します。ストップを一つずつ組み直し、角度を微調整して、その結果をスタイルシートやstyled-componentへそのまま貼り付けられます。
例：線形グラデーション
青から紫への斜めのフェードを作りたいとします。種類を線形にし、最初のストップを0%、2つ目を100%に置いて、角度を135degに設定します。すると出力はbackground: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);となります。放射に切り替えると、同じ2つのストップがradial-gradient(circle, #3b82f6 0%, #8b5cf6 100%)として表示され、線に沿って進むのではなく中心から外側へ広がります。
グラデーションの種類・ストップ・注意点
線形グラデーションは、角度や方向を指定した直線に沿って進みます。放射グラデーションは中心点から広がり、形状（circleまたはellipse）、farthest-cornerなどのサイズ、調整可能なX/Y位置を持ちます。ストップを3つ以上追加すると多色の帯になり、2つのストップを同じ位置に置くとなめらかな混色ではなく、くっきりした色の境目ができます。不透明度を100%未満にすると、グラデーションを写真や別レイヤーの上に重ねられます。仕上がりが決まったら、CSSをコピーするか、ダウンロードしてプロジェクトに取り込みます。