CSSグラデーションジェネレーター
美しいCSSグラデーションを視覚的に作成。線形・円形・扇形に対応。クリーンなCSSコードをエクスポート。無料・即時。
About CSS Gradients
CSS gradients let you display smooth transitions between two or more colors. They're defined as background-image values:
- Linear: Colors transition along a straight line (angle-based)
- Radial: Colors radiate from a center point (circular/elliptical)
- Conic: Colors rotate around a center point (pie-chart style)
Copy the generated CSS and paste it directly into your stylesheet.
About Gradient Generator
美しいCSSグラデーションを視覚的に作成。線形・円形グラデーションに複数のカラーストップを設定可能。角度、位置、色の分布を調整。すぐに使えるCSSコードをコピー。ウェブ背景、ボタン、UIデザインに最適です。
線形＆円形
線形と円形のグラデーションタイプを切り替え。角度、位置、形状を調整して完璧な結果に。
複数のカラーストップ
無制限のカラーストップを追加。ドラッグで位置を変更し、ピッカーで各色を調整。複雑なグラデーションも簡単に作成。
ライブCSS出力
正確なCSSグラデーションコードをコピー。スタイルシート、Tailwind設定、デザインシステムにそのまま貼り付け可能。
リアルタイムプレビュー
作成中のグラデーションを確認。全幅プレビューが色や角度の変更に即座に反映されます。