Text Gradient

This snippet fills text with a gradient instead of a solid color. There is no native CSS property that paints a gradient directly onto glyphs, so the trick is to put the gradient on the element's background and then clip that background to the shape of the text. I reach for this on hero headings, logos, and callout numbers where a single flat color looks dull and an image would be overkill.

.gradient-text {
  background-color: #f3ec78;
  background-image: linear-gradient(45deg, #f3ec78, #af4261);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

How it works

The element gets a linear-gradient as its background-image and a solid background-color as a fallback for anything that can't render the gradient. The two key lines are background-clip: text (here written with the -webkit- and -moz- prefixes) and text-fill-color: transparent. Clipping the background to text means the painted background only shows through the shape of the glyphs; making the text fill transparent then lets that clipped gradient become the visible color of the letters. The background-size: 100% keeps the gradient sized to the element so the color stops land where you expect. The 45deg angle controls the direction the gradient runs across the text.

When to use it

I use this for short, large text: headings, hero titles, big numbers, or a brand wordmark. It works best at heavier font weights, because a thin font leaves so little glyph area that the gradient barely reads. Keep an eye on contrast and legibility for long body copy, gradient text is harder to read at small sizes and over busy backgrounds.

A few gotchas worth knowing. The -webkit-background-clip: text property still needs the prefix in most browsers, so don't drop it. Because the text fill is transparent, the gradient is also the only thing making the text visible, the solid background-color is what shows if background-clip fails, so pick a color close to the gradient as a sensible fallback. For accessibility, the underlying text is still real, selectable, and read by screen readers, so this stays accessible as long as the gradient keeps enough contrast against the page.

To get more gradients quickly, goto uigradients.com and select from a list of gradients. Copy paste in the .gradient-text field.

Live Demo