Linear & radial types
Switch between linear gradients (with angle control) and radial gradients with a single click.
Color Tools
CSS Gradient Generator
Build beautiful linear and radial CSS gradients with a live visual editor. Add multiple color stops, control the direction, and copy production-ready CSS in one click.
Multiple color stops
Add or remove color stops beyond the default two to create complex multi-color gradients.
Copy CSS instantly
Get the production-ready CSS background property copied to your clipboard with one click.
Type
Angle: 135°
0°90°180°270°360°
Presets
Color Stops
Stop 1
Stop 2
CSS Output
background: linear-gradient(135deg, #ff7a18, #32d2ff);How to create a CSS gradient
Step 1
Choose colors and type
Pick your gradient colors using the color pickers, then select linear or radial type.
Step 2
Adjust the angle
For linear gradients, drag the angle slider to rotate the direction from 0° to 360°.
Step 3
Copy the CSS
Click 'Copy CSS' to copy the background property. Paste it directly into your stylesheet.
FAQ
Can I add more than two color stops?
Yes. Click 'Add stop' to add additional color stops for more complex multi-color gradients.
What CSS property does it generate?
It outputs a background shorthand property like `background: linear-gradient(135deg, #ff7a18, #32d2ff);` ready to use in CSS.
Does it support transparent color stops?
The hex color picker doesn't support alpha transparency. For transparent stops, edit the CSS output directly.