CSS gradient generator
Build a two-color CSS gradient in your browser and copy the background property. Nothing is uploaded.
Adjust the fields. CSS updates in this tab.
How to use the CSS gradient generator
- Pick two colors and linear or radial.
- Set the angle for linear gradients.
- Copy the background: … declaration.
Two stops
Enough for a hero wash or a button fill. Add more stops in your stylesheet if you need a mesh. The preview updates as you drag the color inputs. Angle is ignored for radial.
Nothing is uploaded
CSS is local.
CSS gradient generator FAQ
Can I add a third color?
Not on this page. Paste the output and insert another stop by hand.
Repeating gradients?
Use repeating-linear-gradient in your own CSS.