CSS Gradient Text and Image Overlays: Two Practical Recipes

Gradients are not only for plain backgrounds. Two of the most useful things you can do with them are filling text with a gradient and laying a gradient over an image so overlaid text stays readable. Both are a few lines of CSS once you know the pattern. This guide covers each recipe, the browser-prefix detail that trips people up, and how to keep the result accessible. Build the gradient itself visually in the CSS Gradient Generator, then drop the value into either recipe below.

Recipe 1: gradient-filled text

To fill text with a gradient, you paint the gradient as the element's background, then clip that background to the shape of the text and make the text itself transparent so the gradient shows through. The key property is background-clip: text, which is still applied with the -webkit- prefix in several browsers, so you include both lines. Set a solid color as a fallback in case clipping is unsupported.

.headline {
  color: #6366f1; /* fallback if clipping is unsupported */
  background-image: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Recipe 2: a gradient overlay on an image

White text over a photo is often unreadable because the photo has bright and dark patches. The fix is a scrim: a semi-transparent gradient laid over the image to even out the background. CSS lets you stack multiple backgrounds in one declaration, listed top layer first, so you put the gradient before the image. Using a gradient rather than a flat tint lets the overlay be stronger where the text sits and lighter elsewhere, so the photo still shows through.

.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)),
    url("photo.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}

The two rgba() layers darken the top of the box more than the bottom, so a heading near the top stays legible while the lower part of the photo stays bright. Adjust the alpha values to taste: higher numbers mean a stronger overlay and safer contrast, lower numbers let more of the image through. The transparency here uses the alpha channel covered in CSS color formats.

Building the gradient

Both recipes need a gradient value, and that is the part worth doing visually. Open the CSS Gradient Generator, pick your colors and angle, and copy the linear-gradient value it produces. For gradient text, use it as the background-image and clip it. For an overlay, swap the solid colors for rgba() values with some transparency so the image shows through. For the fundamentals of angles, stops, and radial shapes, see CSS gradients explained.

Sources

• MDN: background-clip
• MDN: Using CSS gradients