このツールについて
CSS グラデーションはヒーロー背景・ボタン・カードなど至る所で使われますが、構文を手書きし角度を当てるのは面倒です。このビジュアルビルダーなら、カラーストップを追加・ドラッグし、角度を設定し、線形・放射・円錐グラデーションを切り替えながら、結果がライブプレビューを満たす様子を確認できます。
良い感じになったら、できあがった background の CSS をそのままスタイルシートにコピー。完全にクライアントサイドなので、いくらでも試せます——どこにも送信されません。
よくある質問
このジェネレーターは -webkit-linear-gradient のようなベンダープレフィックスを付けますか？
いいえ。ベンダープレフィックス付きの構文が必要なのは2012年以前の非常に古いブラウザだけなので、このツールは標準の linear-gradient()、radial-gradient()、conic-gradient() のみを出力します。現行のブラウザなら問題なく解釈できます。
作成したグラデーションはどこかにアップロードや保存されますか？
いいえ。カラーストップ、角度、プレビューはすべてブラウザ内でリアルタイムに生成され、サーバーには何も送信されません。
リニア（線形）、ラジアル（放射状）、コニック（円錐状）グラデーションの違いは何ですか？
リニアは指定した角度の直線に沿って色を変化させ、ラジアルは中心点から円形に外側へ広がり、コニックはカラーホイールのように中心点の周りを回転しながら色が変化します。
カラーストップはいくつまで追加できますか？
必要なだけ追加できます。「Add」をクリックすると新しいストップが追加され、位置スライダーでドラッグ調整でき、最後の2つを除いてどのストップも削除できます。
生成されたCSSをそのままスタイルシートに貼り付けられますか？
はい。「Copy」をクリックして、`background: ...;` の行をそのままCSSルールやインラインスタイルに貼り付けるだけで使えます。編集は不要です。