CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the ready-to-use code.
Type
90°
Color stops
CSS
How to use the CSS Gradient Generator
Add and position color stops.
Adjust type and angle.
Copy the generated CSS.
CSS gradient generator
Gradients add depth to backgrounds, buttons and cards. Writing the syntax by hand is fiddly — angles, color stops, positions. This generator gives you a live preview and produces clean linear or radial gradient CSS you can paste straight into your stylesheet.
Key features
- Linear & radial gradients
- Multiple color stops
- Adjustable angle & position
- Copy the CSS instantly
Frequently asked questions
Can I add more than two colors?
Yes — add as many color stops as you like and drag their positions.
Does it support radial gradients?
Yes — switch between linear and radial and the CSS updates with a live preview.
Is the output standard CSS?
Yes — it outputs the standard background gradient property, ready to paste.