Create beautiful CSS gradients with live preview
Gradient Settings
%
%
CSS Output
background: #667eea; background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%); background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Usage Examples
Button
Create stunning CSS gradients for your websites with our visual editor. Design linear, radial, and conic gradients with unlimited color stops. Preview in real-time, adjust angles and positions, then copy the CSS code. No design skills required.
How to Use
- 1Select gradient type: linear, radial, or conic
- 2Add and adjust color stops by clicking the gradient bar
- 3Set the angle (linear) or position (radial)
- 4Preview your gradient in real-time
- 5Copy the generated CSS code