Use close colours
Neighbouring hues blend more smoothly than opposites.
CSS Gradient Generator
Build smooth background gradients without guessing at CSS syntax. Pick colours, drag the stops, choose linear, radial or conic, and copy the code straight into your stylesheet.
- 100% free
- No sign-up
- Runs in your browser
Colour stops
Presets:
Preview
How to use
How to use the CSS Gradient Generator
- Choose a gradient type and angle.
- Set your colours and drag each stop into position.
- Add more colours or try a preset.
- Copy the CSS, which includes a solid fallback colour.
Private by design. Gradients are created in your browser. Nothing is uploaded or stored.
About this tool
Linear, radial and conic gradients
Linear gradients blend colours along a straight line at the angle you choose, which suits buttons, banners and backgrounds. Radial gradients spread outward from a centre point, giving a soft spotlight effect. Conic gradients sweep colours around a point, useful for pie-chart style graphics and colour wheels.
The generated CSS includes a plain background colour first as a fallback. Every modern browser supports these gradients, so you no longer need vendor prefixes.
Good to know
Gradient design tips
Check text contrast
Make sure text stays readable across the whole gradient.
Subtle often wins
A gentle gradient can look more polished than a bold one.
Match your brand
Use your brand colours from our colour picker.
FAQ
CSS Gradient Generator FAQs
Do CSS gradients slow down a page?
No. They are drawn by the browser and are lighter than background images.
Do I need -webkit- prefixes?
Not for modern browsers. The code works without them.
Can I use gradients on text?
Yes, with background-clip: text and a transparent text colour.
Can I add more than two colours?
Yes. Click Add colour as many times as you like.
Need extra development capacity?
Hire dedicated developers from iCreativez who work as part of your team.