Gradient Generator

Interpolating between two saturated colours in sRGB often passes through a desaturated, muddy middle — blue to yellow is the classic offender. It happens because the numeric midpoint between two RGB values is not the perceptual midpoint.

Adding an intermediate stop in a colour you actually want fixes it, and modern CSS can interpolate in perceptual spaces like OKLCH, which keeps the blend vivid across its whole length. For backgrounds behind text, remember that contrast changes along the gradient — check the worst point, not the average.

This gradient generator builds three kinds. Linear gradients are the familiar one: set an angle, add colour stops, and copy a linear-gradient() line straight into your stylesheet. The corner mode blends a different colour from each of the four corners, producing soft, glowing backgrounds that a single linear gradient cannot. The mesh mode goes further with a grid of control points you drag around the preview, for the organic, blurry colour fields popular in modern landing pages.

Corner and mesh gradients are built from layered radial-gradient() values, so they also copy out as plain CSS with no images to host. When you need a file instead, for a phone wallpaper, a presentation or a social post background, export a PNG at HD 1920 × 1080, square 1080 × 1080 or story 1080 × 1920. The optional noise setting adds fine grain, which gives flat digital gradients a more tactile, printed feel.

Gradient text needs three declarations: set the gradient as the element's background, then add background-clip: text (with -webkit-background-clip: text for wider support) and color: transparent. The letters become windows onto the gradient. Keep it for large headings, since thin body text in a gradient is hard to read.

For a full-page background, apply the gradient to the body or a wrapper and give it min-height: 100vh. Without that, a short page lets the gradient end part-way down the screen and repeat in bands.