Guide · CSS gradients

CSS gradients explained: linear, radial and conic

Gradients are the cheapest depth you can add to a design — no image download, infinitely scalable, and animatable. Here's the syntax that matters, the pitfalls, and the recipes worth stealing.

Linear: the workhorse

A linear gradient blends colours along a straight line. The first argument sets the direction — an angle or a keyword — and everything after it is a list of colour stops:

background: linear-gradient(135deg, #0F2228 0%, #3DB3CB 100%);

0deg points up, 90deg points right, and 135° gives the top-left to bottom-right sweep most hero sections use because it follows the natural reading direction. Stops take optional positions; leave them out and the browser spaces the colours evenly.

Radial: glows and spotlights

A radial gradient blooms outwards from an origin. You can control the shape (circle or ellipse), the size, and — most usefully — the position:

background: radial-gradient(circle at 30% 20%, #3DB3CB 0%, #0F2228 70%);

Moving the origin off-centre (at 30% 20%) instantly makes the effect feel designed rather than default. Radials excel as soft page-background glows behind content and as "light source" effects on cards — usually at low contrast, letting the shape stay subliminal.

Conic: the modern one

A conic gradient sweeps colour around a centre point like a clock hand, rather than out from it:

background: conic-gradient(from 220deg at 50% 50%, #0F2228, #3DB3CB, #EEF3F4, #0F2228);

Repeating the first colour as the last makes the full circle seamless. Conics power pie charts, colour wheels and the iridescent, holographic backgrounds fashionable in current product design. Support is universal in modern browsers — they simply arrived later than the other two, so they still read as fresh.

Colour stops, hints and hard stops

Fewer stops, related hues. Two or three colours from one harmonious palette almost always beat five unrelated ones. Neighbouring hues blend cleanly; opposite hues pass through grey mud in the middle.
Hints move the midpoint. A bare percentage between two stops (#A 0%, 30%, #B 100%) shifts where the transition concentrates, letting one colour dominate without adding stops.
Hard stops make stripes. Give two adjacent stops the same position (#A 50%, #B 50%) and the blend becomes a crisp edge — the trick behind flags, progress bars and retro sunburst effects.

Fixing banding

Wide, gentle gradients — especially dark ones on large monitors — can show visible stair-steps where the screen runs out of in-between colours. Three practical fixes: keep the two end colours closer in lightness, add an intermediate stop to break the long ramp, or overlay a whisper of noise texture, which dithers the transition and adds a tactile, printed feel as a bonus. The gradient generator has a one-toggle grain overlay for exactly this.

Animating responsibly

background-image itself can't transition smoothly, so animated gradients typically oversize the background and slide it with background-position keyframes. Two rules keep it tasteful: slow (cycles under about five seconds read as an alert, not an ambience) and optional — wrap the animation in a media query so users who ask for reduced motion get a calm, static gradient:

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: gradientShift 9s ease infinite; }
}

Text on gradients: a gradient background has no single contrast ratio — test your text against the lightest colour it can sit over, or add a translucent dark overlay behind the text block. Our accessible colour guide covers the thresholds.

Skip the syntax entirely

The JUMI gradient generator builds all three gradient types visually — angle and origin sliders, draggable stops, smooth-blend and grain toggles, live previews on a hero, button and card — and copies production-ready CSS, including the @keyframes block for animated gradients. Start from a palette (see colour theory basics) and send it straight into the stops with one click.

Open the gradient generator →