CSS Gradient Generator
Build and copy CSS gradients visually.
Use the CSS Gradient Generator tool
What this css gradient generator does
CSS Gradient Generator turns colour choices into a `background-image` declaration. Switch between linear, radial and conic gradients, drag stop positions, and add a third colour to steer the transition through an intermediate hue.
The preview uses the same CSS you copy, so what you see is what the browser will render. Presets provide a starting point, and every value remains editable rather than being locked behind a random generator.
Why use it
- Create a hero background without opening a design tool.
- Fix a muddy two-colour blend by adding a middle stop.
- Copy exact CSS instead of approximating colours by eye.
How to use it
- 1Choose linear, radial or conic.
- 2Set the angle and colour stops.
- 3Copy the CSS declaration into your stylesheet.
Worked examples
Linear
Input
#0f766e → #5eead4 at 135°
Output
linear-gradient(135deg, #0f766e 0%, #5eead4 100%)
Three stops
Input
Orange, yellow, pink
Output
A gradient that passes through yellow instead of turning brown in the middle.
Common mistakes
- Using gradients behind text without checking contrast at every point.
- Forgetting a fallback colour for browsers or email clients that ignore gradients.
- Assuming a gradient prints the same way it looks on a bright screen.
Frequently asked questions
Are gradients supported everywhere?
Linear and radial gradients are universally supported in current browsers. Conic gradients are supported in current versions but may be missing in older email clients.
Why does the middle look grey?
Browsers interpolate in sRGB by default, and opposite colours can pass through a dull midpoint. Add an intermediate stop with the colour you want.
Can I use this in email?
Some email clients support CSS gradients, many do not. Always set a solid background colour as a fallback.