The three kinds of gradient
- Linear runs along a straight line.
135deggoes from the top left to the bottom right;0deggoes straight up. - Radial spreads outward from a point, which is how a soft glow or a spotlight is made.
- Conic sweeps around a point like a clock hand — the way pie charts and colour wheels are drawn in pure CSS.
Colour stops
Each stop is a colour and a position in per cent. Two stops give a straight blend; adding a third in the middle lets you steer the transition. Putting two stops at the same position creates a hard edge instead of a blend, which is how stripes are made.
How to use the generator
- Choose the type and set the angle for linear and conic gradients.
- Set the number of stops, then pick each colour and drag its position.
- Copy the CSS. The snippet includes a plain background colour as a fallback for very old browsers.
Using gradients well
- Keep the colours close in hue. Distant hues pass through a muddy grey in the middle.
- Check text on top with the contrast checker — a gradient that passes at one end often fails at the other.
- Gradients are painted by the GPU and cost nothing in bandwidth, unlike a background image.
- A gradient on
backgroundreplaces the background colour, so put the fallback colour first.
Browser support
Linear and radial gradients work everywhere, including browsers ten years old. Conic gradients need a browser from 2020 or later, which now covers almost everyone — but keep a plain colour behind them if your audience uses old devices.
Frequently asked questions
How do I make a CSS gradient?
Set the type, the angle and the colour stops above, then copy the generated background property into your stylesheet. The preview shows exactly what the browser will paint.
What angle is a left-to-right gradient?
90deg. In CSS, 0deg points upwards and the angle turns clockwise, so 180deg goes top to bottom and 135deg runs from the top left corner.
Can I use a gradient as text colour?
Yes — put the gradient on the background and add background-clip: text with a transparent text colour. Keep a solid colour as a fallback, since the effect is unreadable if it does not apply.