Gradient Generator

Text over a gradient sits over its worst stop

A contrast ratio describes two colours. A heading laid across a gradient is over a different colour at every point, so the measurement that matters is the one at the point where the two colours come closest — usually one end, sometimes a mid stop that was added to hold a hue. The middle of the ramp is the one place the number will always look acceptable, and it is the place people test.

Three fixes, in the order they are worth trying. Move the type: a heading that sits over the flattest third of the ramp is solving the problem by not having it. Put a scrim underneath — a solid or gently graded overlay between the gradient and the text, which costs a stop and buys a predictable band. Or narrow the ramp so its ends are closer together, which is the same idea as the scrim applied to the background instead of the foreground.

What does not work is relying on the gradient's direction. A ramp that is light at the top and dark at the bottom reads fine in the design tool at the size the design tool draws it, and falls apart the moment the text wraps onto an extra line or the container is narrower than expected and the paragraph pushes down into the pale end. Where the layout can reflow, the background has to clear the threshold at every point the text can reach.

Hard stops are drawn, not blended

Two stops at the same position leave nothing to interpolate, and the browser draws a crisp edge between them. That turns a gradient function into a banding tool, which is what a progress meter, a chart fill or a striped divider actually wants:

linear-gradient(90deg,
        #1F6FEB  0%   38%,
        #E8EAED 38%   100%)

        both stops sit at 38%, so the change is instant.
        no fade, no anti-aliased seam, no one-pixel blur.

The alternative — two stops a fraction of a percent apart — produces a slightly soft edge, which looks like a rendering accident rather than a decision. Where the bands are deliberate, share the position exactly; where the seam looks too hard at small sizes, the honest fix is a hairline divider element rather than a squeezed gradient.

A smooth blend also implies something the data may not say. A bar that fades from one colour to another reads as a value passing continuously from the first to the second, and if the underlying quantity is categorical — two states, not a range — the fade is a claim that is not true. Stepped bands say the same thing without the implication, which is why they show up on meters and not on hero sections.

What is underneath matters

A gradient is a background image, and a background image is optional. Declaring a solid background-color in the same rule as the gradient gives every browser something to paint if the gradient declaration is dropped, and it costs nothing where the gradient renders — the image sits on top of the colour. This is the difference between a section that loses its tint on an old browser and one that comes out with black text on a white page, which is a legible page rather than a broken one.

Two other places the background disappears. A browser set to high-contrast or forced-colours mode replaces backgrounds with its own palette, so a gradient behind text can be removed while the text stays — anything relying on the contrast between a light ramp and dark type needs to hold up when the ramp is gone. And printing drops background images by default, in every browser, because they are usually decoration; a gradient that was carrying meaning rather than decoration has to survive on border colours, text weight or an actual element instead.

The conic one is doing something different

A conic gradient sweeps its stop positions around a centre point rather than along a line, so every stop is an angle. It has a starting direction of its own and a position for the centre, and the two together decide where the first colour begins and where the sweep is anchored. Change the centre and the whole ramp moves: the same stops centred off to one side produce bands that curve around a point outside the box.

That makes it the right tool for anything organised by direction rather than by distance — a colour wheel, a compass, a gauge, a sweep that highlights a segment of a ring. The hard-stop technique gets much further here than it does in a linear ramp: a long list of same-position pairs turns the function into a wheel of wedges, which is how a pure-CSS pie chart exists at all. It is a poor substitute for a linear gradient with three stops, which is what people reach for it as when what they wanted was a diagonal.

Where the two ends of a ramp come from matters more than how the ramp is drawn. The Palette Generator produces a family whose ends already belong together, and the Contrast Checker settles whether the type laid over the result can be read.