CSS Gradients: Interpolation, Stops and Readable Text
Compare interpolation spaces and build a gradient with a controlled text surface instead of trusting endpoint contrast.
Updated : Rebuilt around explicit design choices, reproducible examples and documented limitations; retained the existing URL.
A gradient is a sequence of colors between stops. Its intermediate colors depend on the interpolation space, not only its endpoints. Review the result at its actual dimensions because a narrow button and a wide banner expose different parts of the transition.
Make the interpolation choice visible
.gradient-srgb { background: linear-gradient(90deg in srgb, #FF0000, #0000FF); }
.gradient-oklab { background: linear-gradient(90deg in oklab, #FF0000, #0000FF); }Render these next to one another with the same dimensions. They demonstrate different interpolation paths; neither is an automatic quality score. Choose the path that fits the design and preserve a conventional fallback if your supported browser set needs it.
Control a midpoint when the content needs it
.hero {
background: linear-gradient(90deg, #172554 0%, #7C3AED 55%, #FBCFE8 100%);
}
.hero-copy {
color: #FFFFFF;
background: #172554;
padding: 1rem;
}The pale endpoint of this hero makes white overlay text risky. The opaque navy text panel gives the copy a controlled surface. Its size and placement should follow the content; a transparent shadow under text is a different composition and needs another check.
Test text where it is drawn
A reproducible text and background example.
Same pair, larger text.
##FFFFFF / ##172554
White copy on the opaque navy panel.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##FFFFFF / ##FBCFE8
White copy would meet the pale endpoint if the panel were removed.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixChecking the endpoints alone is not a general gradient audit. Inspect every background region beneath the text, including responsive positions, images and animation. Sampling a few positions can find failures but cannot prove that every point passes. The opaque panel simplifies the condition being measured.
Review rendering limits
Open the hero colors in Studio to inspect the palette, then test the real gradient in the consuming page. Screenshots can help review banding and composition, but preserve the CSS values as the reproducible source.