CSS Gradient Generator
Design linear, radial and conic CSS gradients visually. Add color stops, adjust angle, copy the CSS.
What is a CSS gradient?
A CSS gradient creates a smooth transition between two or more colors without needing an image file. The three types are: linear-gradient (directional), radial-gradient (circular/elliptical from a center point), and conic-gradient (rotating around a center, like a pie chart).
How to use the gradient generator
- Choose a gradient type: Linear, Radial or Conic.
- Adjust the angle slider for linear/conic gradients.
- Click color swatches to change stop colors, or drag the stop handles on the track.
- Add extra stops with the + Add stop button.
- Copy the CSS and paste it into your stylesheet.
Can I use gradients as a background?
Yes. Use the generated value as a background or background-image property. Gradients are treated as images in CSS so they work anywhere an image is accepted.
How do I create a transparent gradient?
Use rgba() or transparent for a color stop. For example: linear-gradient(to right, rgba(0,0,0,0.8), transparent) fades from black to see-through.