生成されたCSSはどのように使用しますか？

コピーボタンをクリックして完全なCSS値をコピーし、スタイルシートに `background: ;` として貼り付けてください。出力はすべてのモダンブラウザに対応した有効なCSSです。

CSSグラデーションジェネレーター - 美しいグラデーションを無料でオンライン作成

ライブプレビューとコピー可能なコード付きで線形・放射状のCSSグラデーションを作成します

カラーツール

Tool

Gradient Type

Angle (0–360°)

Color Stops

Stop 1

Stop 2

Preview

CSS Output

background: linear-gradient(135deg, #6366f1, #ec4899);

線形グラデーションは指定された角度に沿って直線上で色が変化します。放射状グラデーションは中心点から円形に外側へ色が広がります。

最大5つのカラーストップを追加できます。各ストップはグラデーション遷移における色のポイントを表します。より多くのストップを使って、豊かな多色効果を作成できます。

コピーボタンをクリックして完全なCSS値をコピーし、スタイルシートに `background: <値>;` として貼り付けてください。出力はすべてのモダンブラウザに対応した有効なCSSです。

使い方

1グラデーションの種類を選択します：線形または放射状

2線形グラデーションの場合、角度を設定します（0〜360°）

3カラーピッカーで開始色と終了色を選びます

4「カラーストップを追加」をクリックして最大5つのカラーストップを追加します

5ライブプレビューがリアルタイムで更新されます

6「コピー」をクリックしてCSS値をクリップボードにコピーします

よくある質問

線形グラデーションは指定された角度に沿って直線上で色が変化します。放射状グラデーションは中心点から円形に外側へ色が広がります。