What the gradient generator does
The generator builds CSS gradients visually. Choose linear, radial or conic, pick colours and their positions, set the angle or centre, and copy the resulting background rule. The preview updates live so you can see exactly what the code produces. Gradients are generated by the browser at render time from the CSS alone — no image file, no request, and they scale to any size without pixelation.
The three gradient types
| Type | Syntax | Colour flows |
|---|---|---|
| Linear | linear-gradient(135deg, #ff7a18, #af002d) | In a straight line at an angle |
| Radial | radial-gradient(circle at center, #fff, #000) | Outward from a centre point |
| Conic | conic-gradient(from 0deg, red, yellow, green, red) | Around a centre point, like a colour wheel |
/* Linear: angle, then colour stops with optional positions */
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
/* Radial: shape and position, then stops */
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d0d0d0 100%);
/* Conic: start angle and centre, then stops */
background: conic-gradient(from 90deg at 50% 50%, #f00, #0f0, #00f, #f00);Angles and directions
For linear gradients, 0deg points up (colour flows bottom to top), 90deg points right, 180deg points down — the default — and angles increase clockwise. Keywords such as to right or to bottom left are equivalent and sometimes clearer in code. Corner keywords (to top right) adjust the angle so the gradient line passes through the box's corners regardless of its aspect ratio, which a fixed angle does not.
Colour stops and hard edges
- Stops without positions are spread evenly between 0% and 100%.
- Two stops at the same position create a hard edge:
linear-gradient(90deg, red 50%, blue 50%)is a sharp split, useful for stripes and progress bars. - Colour hints (a bare percentage between two colours) move the midpoint:
red, 30%, blueputs the 50/50 mix at 30%. - Transparent stops work:
rgba(0,0,0,0)to black makes a fade overlay for text on images. Use the same hue with alpha 0 rather than the keywordtransparentto avoid a grey band in some browsers.
Practical patterns
- Subtle depth on buttons: a linear gradient from a colour to a version 8–10% darker at 180deg.
- Text overlays on photos:
linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 60%)over the image. - Mesh-like backgrounds: stack several radial gradients with transparent edges in one
backgrounddeclaration, separated by commas. - Pie and donut charts: a conic gradient with hard stops at the segment boundaries, masked to a circle with
border-radius: 50%. - Gradient text: apply the gradient as background, then
-webkit-background-clip: text; color: transparent. - Loading skeletons: an animated linear gradient shifting its
background-position.
Banding and colour spaces
Long gradients between two similar dark colours can show visible bands, because 8-bit colour has only 256 steps per channel. Mitigations: add a little noise texture, shorten the gradient, or use colours further apart. Modern browsers also support interpolation in perceptual colour spaces — linear-gradient(in oklch, …) — which avoids the muddy grey that appears midway between complementary colours in sRGB. Support is broad in 2026 but not universal; provide a plain fallback first.