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

ライブプレビューとコピー可能なCSSまたはTailwindコードで美しいグラデーションを作成

ライブプレビュー

CSS & Tailwind

インタラクティブエディター

グラデーションをリアルタイムで確認

インタラクティブカラーバー - クリックで追加、ドラッグで移動

💡 どこでもクリックしてカラーストップを追加、既存のストップをドラッグして再配置、ストップをクリックして編集

タイプ

方向

プロジェクトで使用するコードをコピー

背景プロパティ

background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

CSSクラス

.gradient {
  background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);
}