グラデーション生成

CSSグラデーション（linear、radial、conic）を作成。リアルタイムプレビュー付き。

角度: 135°

カラーストップ

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

🐛

問題を報告

バグを見つけましたか？提案がありますか？このツールの改善にご協力ください。

これはどんなツールですか？

CSSグラデーションジェネレーターは、ビジュアルプレビュー付きの線形および放射状グラデーション背景を作成します。linear-gradient()およびradial-gradient()関数のための本番環境で使用できるCSSコードを生成します。複数のカラーストップ、角度、透明度をサポートします。モダンなWebデザインに不可欠です。

使い方

1
色を追加
グラデーションにカラーストップを追加します。
2
設定を調整
角度、タイプ（線形/放射状）、位置を設定します。
3
CSSをコピー
生成されたCSSコードを取得します。

よくある質問

CSSの線形グラデーションとは何ですか？

線形グラデーションは、直線上で2色以上の間で滑らかに遷移します。構文: background: linear-gradient(angle, color1, color2, ...)。一般的な角度：0°（下から上）、90°（左から右）、180°（上から下）。

CSSで使用できますか？

はい、標準的なCSSグラデーションコードを生成します。

カラーストップの位置を設定できますか？

はい。各カラーストップには0〜100（パーセント）の位置入力欄があります。必要に応じてカラーストップを追加または削除でき、最低2つが必要です。生成されるCSSには常に各カラーストップの位置が含まれます。