CSS gradient generator

Linear vs radial — two shapes of blend

A CSS gradient is a generated image with no file behind it, so it scales to any size without blurring, adds nothing to your page weight, and can be animated. This generator builds the two you reach for most. A linear-gradient runs colours along a straight line at an angle you set (90deg is left-to-right, 180deg top-to-bottom) — the workhorse for backgrounds, buttons and overlays. A radial-gradient spreads them outward from a centre point in circles or ellipses, which is natural for spotlights and soft vignettes. (CSS has a third type, conic-gradient, that sweeps colours around a centre like a clock face for colour wheels and pie fills — handy to know, though this tool focuses on the linear and radial cases.)

Colour stops, and the grey dead-zone trap

Each colour stop has a position from 0–100%, and adding stops between the ends builds multi-colour blends. Place two stops at the same position and the transition becomes a hard edge — the trick behind stripes, bands and faux-borders without any extra elements. The subtle gotcha is that the browser interpolates straight through RGB space, so blending two vivid but opposite colours (a blue into a yellow, say) passes through a muddy grey in the middle. The fix is an intermediate stop in a colour that keeps saturation up, or a perceptual interpolation hint — which is why a good-looking gradient usually has one more stop than you'd expect.

Using gradients without hurting legibility

The most common real-world use is a background behind text — hero sections, cards, buttons — and that's exactly where gradients bite back: text that's readable over the light end can vanish over the dark end. If you put copy on a gradient, check it against both extremes, not just the average, with the contrast checker, and lean on a semi-transparent overlay if it won't pass. Start from a coherent set of colours generated in the palette generator, then copy the finished background declaration straight into your stylesheet.