グラデーション生成器

複数のカラーストップで美しいCSSグラデーションを生成。リニア、ラジアル、コニックグラデーションに対応。角度、色をカスタマイズしてCSSコードをエクスポート。

0%
100%
CSS
background: linear-gradient(90deg, #667EEA 0%, #764BA2 100%);
最大8つのカラーストップで美しいCSSグラデーションを作成。すべてのグラデーションはローカルで生成され、CSSはすべての最新ブラウザと互換性があります。

使い方

  1. 1

    グラデーションタイプを選択

    リニア（直線）、ラジアル（中心から円形）、コニック（点周囲のスイープ）グラデーションスタイルを選択してください。

  2. 2

    色と位置を調整

    カラーピッカーをクリックして各色を変更します。スライダーで各色が表示される位置（0-100%）を調整します。

  3. 3

    角度または方向を設定

    リニアとコニックグラデーションの場合、角度スライダー（0-360°）またはクイックプリセットボタンを使用して方向を設定します。

  4. 4

    CSSコードをコピー

    「CSSをコピー」をクリックして完全なbackgroundプロパティをコピーします。スタイルシートに直接貼り付けられます。

よくある質問

何色まで追加できますか？
最大8つのカラーストップを追加できます。各ストップはグラデーションに沿って0%から100%の任意の位置に配置できます。
リニア、ラジアル、コニックグラデーションの違いは？
リニアグラデーションは任意の角度で直線に流れます。ラジアルグラデーションは中心点から円形に広がります。コニックグラデーションはカラーホイールのように中心点の周りをスイープします。
生成されたCSSはクロスブラウザ対応ですか？
はい。最新のCSSグラデーションはすべての現行ブラウザ（Chrome、Firefox、Safari、Edge）でサポートされています。2015年以降にリリースされたブラウザにはベンダープレフィックスは不要です。
透明な色を使用できますか？
カラーピッカーはHEXカラーをサポートしています。透明度には、コピー後にCSSを手動で編集してrgba()またはhsla()値を使用できます。