CSSグラディエント生成
ビジュアルビルダーで美しいCSSグラディエントを作成。
135°
0%
100%
background: linear-gradient(135deg, #0d9488 0%, #3b82f6 100%);How to Use
- 1
Choose Linear or Radial gradient type.
- 2
Add color stops and adjust their colors and positions using the controls.
- 3
Copy the generated CSS code and paste it into your stylesheet.
Features
Linear & Radial Gradients
Create both linear gradients with custom angles and radial gradients for diverse design needs.
Multiple Color Stops
Add as many color stops as you like and adjust their positions with precision sliders.
Visual Preview
See a live preview of your gradient update in real time as you adjust the settings.
Copy CSS Code
Copy the ready-to-use CSS background-image gradient code with one click.
FAQ
対応グラディエントタイプは？
カスタム角度の線形とカラーストップ付き放射状グラディエント。
カラーストップを複数追加可能？
はい、スライダーで位置調整も可能です。