CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
How to use CSS Gradient Generator
- Choose linear, radial or conic.
- Pick the colours and move the position sliders; add a middle colour for a three-colour gradient.
- Select Copy CSS and paste it into your stylesheet.
How it works
A linear gradient blends along a line at the angle you set: 0° goes upward, 90° to the right, 180° downward. A radial gradient spreads outward from a centre as a circle or ellipse. A conic gradient sweeps around a centre like a colour wheel or pie chart. Each colour has a position (a "stop") from 0% to 100% that says where along the way it is fully reached.
The CSS has two lines: a solid background colour first, as a fallback, then the gradient, which overrides it in every browser that supports gradients (all current ones). Use background or background-image; gradients are images, so they do not work with background-color.
For text over a gradient, check the contrast against both ends with the contrast checker: a gradient that passes at one end can fail at the other.
Example
background: linear-gradient(90deg, #2440d8 0%, #c8f031 100%); blends from blue on the left to lime on the right.
Frequently asked questions
Which direction is 90deg?
Left to right. 0deg points up, 180deg down, 270deg right to left. The keywords to right, to bottom and so on mean the same as 90deg, 180deg.
How do I make a three-colour gradient?
Tick "Add a middle colour" and set where it sits between the other two.
Do gradients work in all browsers?
Linear and radial gradients have been supported everywhere for over a decade. Conic gradients work in all current browsers (since 2020–2021).
Can I make a gradient transparent or use it on text?
For text, set the gradient as the background and add background-clip: text with a transparent text colour. Transparent stops are not offered by this generator; edit a colour to transparent or an rgba value in the copied CSS.
Limitations
- Two or three colour stops.
- No transparency controls or repeating gradients in the interface.
- No Tailwind or SCSS output; plain CSS only.
Last reviewed November 9, 2026. How we build and test tools.