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.