Design beautiful linear, radial and conic gradients with draggable color stops and presets — then copy the CSS.
Tip: click the gradient bar to add a color stop, then drag it to position.
Drag stops on the bar and watch the big preview update instantly.
All three gradient types with angle control and unlimited color stops.
Grab clean background: CSS with one click — paste and go.
Blend blue into yellow in a standard CSS gradient and the midpoint comes out a muddy grey rather than the green you expected. This is not a rendering fault — it is what happens when you interpolate in sRGB, whose coordinates are not perceptually uniform. The straight line between two colours in that space passes through a region of low saturation, so the middle of the gradient loses chroma.
CSS Color 4 fixes this by letting you name the interpolation space directly: linear-gradient(in oklch, blue, yellow) travels through the colours you would expect, keeping saturation up across the transition. Oklab and Oklch were designed for perceptual uniformity, and Oklch's polar form means hue interpolates around the colour wheel rather than cutting across it.
The one thing to watch with Oklch is that hue interpolation has two directions. Going from red to green can travel through yellow or through blue depending on which way round is shorter, and CSS lets you force it with shorter hue, longer hue, increasing hue or decreasing hue. When a gradient takes an unexpected detour through an unwanted colour, that keyword is the control you want.
Banding is the visible stepping across a large, subtle gradient — distinct stripes instead of a smooth ramp. It happens because 8 bits per channel gives only 256 levels, and a gradient spread across 1,500 pixels between two similar colours has far more pixels than available levels, so many adjacent pixels round to the same value and the transitions between them become edges.
It is worst exactly where gradients are most used: large hero backgrounds, dark tones where human vision is most sensitive to small differences, and transitions between colours that are close together. Compression makes it worse still, since both JPEG and video codecs discard precisely the low-amplitude detail that would have disguised it.
The standard remedy is dithering — adding a small amount of noise so the rounding decisions vary between neighbouring pixels and the eye averages them back into a smooth ramp. A subtle noise texture overlaid at very low opacity works, as does an SVG feTurbulence filter. Adding a third colour stop near the middle also helps, because it shortens the distance over which each interpolation has to spread its available levels. A gradient rendered as CSS rather than as an image avoids the compression half of the problem entirely.
CSS gradient angles do not match the convention used in canvas, SVG or most design tools. In CSS, 0deg points to the top and angles increase clockwise, so 90deg points right. Canvas and mathematical convention start at the positive x-axis and increase anticlockwise. A gradient that appears rotated by ninety degrees when ported between tools is almost always this.
The to bottom right style of keyword is not simply a 45-degree angle either — the specification defines it as the angle that makes the gradient line perpendicular to the box's diagonal, so it adapts to the element's aspect ratio. That is usually what you want, and it is not reproducible with a fixed angle unless the element is square.
Radial gradients take a shape, a size keyword such as farthest-corner, and a position, which together determine where the gradient finishes rather than merely where it starts. Conic gradients sweep hue around a centre point and are the basis for pie charts, colour wheels and the rotating-border effect, since a conic gradient with hard stops produces flat wedges. All three are resolution-independent and cost nothing in download size, which is why replacing a background JPEG with a gradient is one of the cheapest performance wins available.
Pick linear, radial or conic, drag the color stops on the bar (click to add more), adjust the angle, then copy the generated CSS.
Yes — click anywhere on the gradient bar to add a stop, drag it to position, and set its color. Add as many as you like.
Completely free, no sign-up, and it runs entirely in your browser.
Interpolating in sRGB passes through a desaturated region. Specify a perceptual space instead — linear-gradient(in oklch, blue, yellow) — and the midpoint keeps its saturation.
That is 8-bit banding. Overlay a very low-opacity noise texture to dither it, or add an intermediate colour stop so each segment spans fewer pixels. Avoid exporting the gradient as a compressed image.