🎨 Color Tools

CSS Gradient Generator

Create linear, radial and conic CSS gradients visually. Add color stops, adjust angle, copy the CSS output instantly. Includes preset gradients.

Gradient Generator
Color stops
Presets

  




        

      


      

        
How to use the Gradient Generator

        


1

  
Choose gradient type and colors

  
Pick a gradient type — linear (diagonal or axis-aligned), radial (circular from centre) or conic (rotating around a point). Add color stops using the color pickers and position sliders. Each stop can be any color at any percentage point along the gradient.




2

  
Copy the CSS

  
The CSS output updates live as you adjust the gradient. Click Copy CSS to copy it directly to your clipboard, ready to paste into your stylesheet. The output includes the background-image declaration and a background-color fallback for older browsers.