CSSグラデーションジェネレーター
CSSグラデーションをビジュアルに作成：linear、radial、conicの種類、角度スライダー、最大6つのカラーストップ、ライブのフル幅プレビュー、コピー可能なコード。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) を手書きし、ページを再読み込みして確認するのは遅いループです。このジェネレーターはそれを解消します。linear、radial、conicを選び、角度スライダーをドラッグし、各カラーストップをネイティブのカラーピッカーとパーセント位置で設定すれば、フル幅のプレビューがすべての入力で再描画され、最終的な背景行は常にコピー可能な状態です。
3種類のグラデーションは異なる役割をカバーします。linearグラデーションは方向に沿ってフェードし、ほとんどのヒーローセクションやボタンを担います。radialグラデーションは中心から放射状に広がり、光彩やビネットに。conicグラデーションは中心の周りを回り、円グラフやカラーホイールを実現します。タイプはいつでも切り替え可能で、ストップは引き継がれるため、3つを比較するのは数秒で済みます。
最大6つのカラーストップにより、複数帯のデザインにも対応でき、プリセットページでは実績のある組み合わせ（温かいサンセット、穏やかなオーシャン、柔らかなパステルのペア）を提供しているため、白紙ではなく調整可能な出発点として使えます。なお、作業分担としては、このサイトのカラーパレットジェネレーターは調和のとれたフラットカラーを選び、カラーフォーマットコンバーターは値をHEX、RGB、HSL間で変換しますが、このツールは異なる役割、つまり選んだ色をすぐに使えるCSSグラデーションコードに変換します。
すべてブラウザ内でローカルに動作します。アップロード、アカウント、サーバーとの通信は不要で、一度読み込めばオフラインでも使い続けられます。