Developer / CSS
CSS Gradient Generator
Design a linear, radial, or conic gradient with a live preview, as many colour stops as you need, and presets, then copy the CSS.
CSS Gradient Generator: The generator writes the background declaration a browser needs for the gradient you see: linear-gradient with an angle, radial-gradient with a circle or ellipse from the centre, or conic-gradient sweeping round from a starting angle, each with its colour stops in order. A solid colour comes first as a fallback for browsers too old to draw gradients. A new colour is added in the widest gap, mixed from its neighbours, so the gradient does not jump. Runs 100% locally in your browser with zero server file uploads.
- Category
- Developer tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Runs entirely in your browser
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
The first line is a solid colour for very old browsers; every current browser uses the gradient on the second line.
Presets
Gradients that look smooth
A blend between two very different hues, such as blue to yellow, passes through a dull grey in the middle. Adding a stop in between with a brighter colour keeps it lively. Gradients between neighbouring hues, such as orange to pink, rarely need help.
Pick or check colours with the colour converter, and add depth to a card with the box shadow generator.
Text on a gradient
Check that text stays readable at both ends of the gradient, not just in the middle. A darker gradient with white text, or a subtle one behind dark text, is safer than a bright rainbow.
How to use it
- Pick a preset or choose linear, radial, or conic.
- Set the angle and adjust the colours and their positions; add a colour for more stops.
- Copy the CSS into your stylesheet.
Privacy & limitations
Everything runs in your browser; your last gradient is kept only in this browser.
Related tools
Frequently asked questions
What does the angle mean in a linear gradient?
0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom, and 270deg from right to left. The gradient is drawn along that direction, so 135deg runs from the top left corner to the bottom right.
What is a colour stop?
A colour and the position, from 0% to 100% along the gradient, where it is reached exactly. Between two stops the colours blend; putting two stops at the same position makes a hard edge instead of a blend, which is how stripes are made.
How is a conic gradient different from a radial one?
A radial gradient changes colour outwards from the centre, in rings. A conic gradient changes colour round the centre, like the hands of a clock, which is useful for colour wheels and pie charts.
Do I still need -webkit- prefixes?
No. Every current browser supports linear-gradient and radial-gradient without a prefix, and conic-gradient has worked in all of them since 2021. The fallback colour on the first line is only for much older browsers.
Free tool · runs in your browser · no account required