CSS gradients for UI designers (without the muddy middle)
Gradients are everywhere in product UI again — hero bands, glassy cards, primary buttons. The hard part is not picking two pretty hex values; it is keeping text readable in the middle where colors meet.
Export a gradient from a design tool and paste it into CSS. Half the time it looks fine in Figma and flat in the browser, or fine until someone drops white headline text on the blend zone and it disappears. Gradients are cheap to ship — no extra HTTP requests — but they punish lazy stop placement.
Linear vs radial (and when mesh is overkill)
linear-gradient() is the workhorse: heroes, dividers, subtle surface tints. Angle matters — 135deg reads “modern SaaS” because we have all seen it; 180deg top-to-bottom is calmer behind typography. radial-gradient() shines for spotlights behind avatars or soft vignettes on modals. Reserve busy mesh gradients for marketing moments; dashboards rarely need five-stop rainbows behind a data table.
The gradient generator on ChromaXP lets you nudge angle and stops while copying ready CSS. For layered mesh-style backgrounds, the mesh gradient tool is there when a single linear pass feels too flat — just sanity-check contrast before you park a form on top.
Stops: fewer is usually better
Two or three stops beat seven. Extra stops often create a gray-brown band in the center where hues fight. If you need depth, shift lightness of the same hue family instead of jumping from purple to orange in one line. Pull stops toward the edges (e.g. 0% and 100%) and leave a stable region in the middle for text, or add a semi-transparent scrim layer — boring, reliable.
Check the worst-case slice of the gradient, not just the corners. Run headline and button label pairs through the contrast checker against the lightest and darkest band the copy might sit on.
Brand gradients without reinventing the palette
Start from your existing accent ramp. Use brand-500 and brand-700 as stops, or analogous neighbors from the palette generator, so the gradient feels related to buttons and links. Document one “marketing gradient” and one “subtle surface gradient” — more than that and engineers start hard-coding one-offs.
Dark mode needs its own pass
A gradient that pops on white can look like a flashlight on #0f172a. Lower chroma, shorten the lightness range, or swap to a near-solid surface with a faint gradient overlay. Dark UI tips in our dark mode palette guide apply here too — surfaces first, drama second.
Ship the CSS, not a PNG, when you can. Gradients scale, animate, and theme easier. Just give text a fighting chance in the blend zone and you will avoid the most common gradient regret in reviews.