CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Supports linear and radial gradients with multiple color stops.

 
  
  
 
   
 
 
     
 
Frequently Asked Questions
How do I create a CSS gradient online?▾
Choose a gradient type (linear or radial), set the angle or shape, add color stops with the color picker, and copy the generated CSS code. The live preview updates instantly as you make changes.
What is the difference between linear and radial gradients?▾
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient transitions colors outward from a center point in an ellipse or circle shape.
Can I add more than two color stops?▾
Yes. Click the "Add Stop" button to add as many color stops as you need. Each stop has its own color picker and position slider so you can create complex multi-color gradients.
Does the generated CSS work in all browsers?▾
Yes. The output includes both the standard CSS gradient syntax and the -webkit prefixed version for maximum browser compatibility.