CSS Gradient Generator
Build beautiful CSS gradients visually and copy the code — 100% local.
135°
Color stops
CSS output
How it works
1
Choose gradient type
Select linear, radial or conic gradient. Each maps to a different CSS gradient function — linear-gradient, radial-gradient or conic-gradient.
Select linear, radial or conic gradient. Each maps to a different CSS gradient function — linear-gradient, radial-gradient or conic-gradient.
2
Add and adjust color stops
Pick colors with the color pickers and drag stops along the gradient bar to set their positions precisely.
Pick colors with the color pickers and drag stops along the gradient bar to set their positions precisely.
3
Set direction or angle
For linear gradients, set the angle in degrees. For radial/conic, adjust the center point and spread.
For linear gradients, set the angle in degrees. For radial/conic, adjust the center point and spread.
4
Copy the CSS
Click Copy to get the complete, ready-to-paste CSS gradient declaration — works in all modern browsers with no prefix required.
Click Copy to get the complete, ready-to-paste CSS gradient declaration — works in all modern browsers with no prefix required.