CSS グラデーションジェネレーター

無料でオンラインにて美しいCSSグラデーションを作成。複数のカラーストップでリニア・ラジアルグラデーションをデザインし、CSSコードを即座にコピーできます。

Preview
CSS Code

使い方

  1. デザインの用途に合わせて、グラデーションの種類（リニアまたはラジアル）を選択します。
  2. スライダーバーをクリックしてカラーストップを追加し、カラーピッカーから色を選びます。
  3. 回転コントロールを使ってグラデーションの角度や方向を調整します。
  4. ライブプレビューエリアでリアルタイムに結果を確認します。
  5. ワンクリックで生成されたCSSコードをコピーして、プロジェクトに直接貼り付けます。

例

入力: リニアグラデーション：#6A11CB（0%）から #2575FC（100%）、角度 45°
結果: background: linear-gradient(45deg, #6A11CB 0%, #2575FC 100%);

よくある質問

はい、完全に安全です。すべての処理はお使いのブラウザ内でクライアントサイドで行われます。いかなるサーバーにもデータが送信されることはないため、あなたの作業は完全にプライベートに保たれます。

はい、カラーストップはいくつでも追加できます。複数の色を組み合わせて、なめらかなトランジションを持つ複雑なマルチカラーグラデーションを作成できます。

生成されたCSSはすべてのモダンブラウザと互換性があります。より広い互換性のために、必要なベンダープレフィックスも自動的に追加されます。

いいえ、CSSグラデーションジェネレーターは完全無料で、登録やログインは一切不要です。

リニアグラデーションは定義された角度の直線に沿って色が変化しますが、ラジアルグラデーションは中心点から外側に向かって円形または楕円形に広がります。