Seven components that use gradients well: a hero with a deep gradient and glow, a white card with gradient accents, a pricing card with a gradient border, a gradient navigation bar, an input whose border becomes a gradient on focus, stat tiles and a footer that fades into colour.
A hero with a deep multi-stop gradient, a soft radial glow behind the headline and a white primary button. Every stop of the gradient keeps the white headline above 4.5:1 contrast.
View code
<section class="gu1"><h3>Ship faster with less code</h3><p>Components, docs and hosting in one place.</p><a href="#start">Start free</a></section>
A white card with a gradient icon tile and a gradient underline under the title, so colour is an accent rather than a flood. Small gradient touches feel modern without making text harder to read.
View code
<article class="gu2"><span class="ic" aria-hidden="true">⚡</span><h3>Instant sync</h3><p>Changes appear on every device within a second.</p></article>
The recommended plan wrapped in a rounded gradient border using the padding-box and border-box background trick, so the border follows the radius exactly. The card inside is solid, keeping the content easy to read.
A navigation bar with a horizontal gradient and white links, plus a thin brighter line along the bottom. The current page gets a translucent white pill, which works on any part of the gradient.
A text field whose border turns into a gradient when focused, using the two-background border technique on a wrapper with :focus-within. At rest the border is plain grey, so colour appears only where attention is.
Three stats each on its own gradient tile, with large numbers and small labels. The gradients share one angle and similar lightness so the tiles feel like a set, and white text sits on stops dark enough to pass contrast.
A footer whose background fades from the page colour into a coloured glow at the bottom edge, ending a page with a little warmth. The links sit on the darker top part, where they read easily.
Text on a gradient has to pass contrast against its lightest stop, not its average. Test the heading against each colour it crosses.
Accent or flood
A gradient can fill a hero or sit on a small accent such as an icon tile or underline. Small accents feel modern without risking readability.
Borders that follow the radius
Two backgrounds, a solid one clipped to padding-box and the gradient clipped to border-box, draw a gradient border that respects border-radius exactly.
Keep a family
Use the same angle and similar lightness for related gradients so tiles and buttons look like a set rather than random colours.
Frequently asked questions
Do gradients slow pages down?
No. They are drawn by the browser with no image download.
How do I animate a gradient?
See the gradient animations collection for position, @property and hue techniques.