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

linear-gradient・radial-gradientをビジュアルで作成できます

プリセット

方向

カラーストップ

#6366f10%

#ec4899100%

CSS

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

CSSのlinear-gradient（線形グラデーション）またはradial-gradient（放射状グラデーション）をビジュアルで作成し、コードをコピーできるツールです。デザイン作業の効率化に役立てください。

linear-gradientとradial-gradientの違いは？

linear-gradientは直線方向にグラデーションをかけ、radial-gradientは中心点から放射状にグラデーションをかけます。

生成されたCSSはどのブラウザに対応していますか？

現代のすべての主要ブラウザ（Chrome、Firefox、Safari、Edge）に対応しています。IE11以前では動作しない場合があります。

カラーストップは何個まで追加できますか？

このツールでは最大8個まで追加できます。CSSの仕様上はさらに多くのカラーストップを設定できますが、視覚的にはシンプルな方が美しいグラデーションになります。

透明度（アルファ）を使えますか？

カラーピッカーでは16進数カラーのみ対応しています。透明度を使いたい場合は、生成されたCSSコードを手動でrgba()形式に書き換えてください。