CSS & mesh gradient generator

The CSS gradient functions in one table

Angles start at the top and run clockwise: 0deg points up, 90deg right. The keyword to right equals 90deg, but to bottom rightruns corner to corner, so its real angle depends on the box's shape. Each stop is a colour plus an optional position. Two stops at the same position make a hard edge, and a lone percentage between two stops (a colour hint) moves the midpoint of the blend.

Colour interpolation: why the middle goes grey

By default, a gradient between hex colours blends each red, green and blue channel separately. Halfway between pure blue #0000ff and pure yellow #ffff00 that gives #808080, plain grey. The same thing, more subtly, makes many two-colour gradients look dusty in the middle.

CSS Color 4 lets you choose the space. in oklab takes a straight line through a perceptual space, which keeps lightness even but still desaturates complementary pairs. in oklch travels around the hue wheel and keeps the chroma, so blue to yellow passes through teal and green instead of grey. Add longer hue to take the long way round.

/* Vivid: blend around the hue wheel */
background: linear-gradient(in oklch 90deg, #266df0, #ff8a5c);

/* The long way round: a full rainbow from one colour */
background: linear-gradient(in oklch longer hue 90deg, red, red);

One subtlety: white, black and greys have no hue. CSS treats their hue as missing and borrows it from the neighbouring stop, so white to blue in OKLCH stays blue instead of sweeping through red. The generator copies this behaviour when it builds fallbacks and PNGs.

Banding, and how to avoid it

An 8-bit screen has 256 levels per channel. Stretch a dark gradient from #1b1440 to #2a1f5c across a 1920-pixel hero and the green channel, which carries most of the brightness, moves only 11 levels. Lightness changes in a handful of steps, each well over 100 pixels wide, and your eye is especially good at spotting those edges in dark, low-contrast blends.

• Dither. Fine random noise breaks up the band edges. The PNG export adds about ±1 level of noise; in CSS you can lay a faint SVG noise texture over the gradient.
• Increase the difference. More distance between colours, or a shorter span, means more levels per pixel.
• Save carefully. Low-quality JPEG and WebP compression smears gradients into blocks. Use PNG or a high quality setting.

Mesh gradients that look good

A mesh gradient is a set of colour points that fade into each other. In CSS it is a stack of radial gradients, each fading to transparent, over a base colour:

background:
  radial-gradient(at 16% 20%, #ff7a59 0px, transparent 55%),
  radial-gradient(at 84% 14%, #ffc857 0px, transparent 55%),
  radial-gradient(at 80% 86%, #7c5cff 0px, transparent 55%),
  #1b1440;

• Use three to five points; more turns to soup.
• Keep the colours related in lightness and let one contrasting point do the work.
• Push points towards the edges and corners; colour in the centre fights your headline.
• Softness between 40% and 70% blends without losing the shapes.
• Choose the base as the darkest or lightest colour, never a mid-tone.

Layered gradients are cheap to paint, so they work well as hero backgrounds, but avoid animating many layers at once on low-end phones. Pair your gradient with depth from the box shadow generator, build matching shades with the Tailwind colour scale generator, or lift colours from a photo with palette from image. For inspiration, see how the best SaaS landing pages use colour.