CSS Gradient Overlay on Images — Exact Code That Works Every Time

Gradient overlays on images are one of the most used effects in web design — used in hero sections, card thumbnails, banner images, and navigation overlays. There are three reliable CSS techniques for combining a gradient with an image, each with different trade-offs. Build your gradient colors first using the CSS gradient generator, then choose the technique that fits your layout.

Technique 1: Multiple Backgrounds (Inline, Cleanest Code)

CSS allows multiple background values separated by commas. The gradient is layered on top of the image by listing it first:

.hero-image {
  background:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8) 100%),
    url('/your-image.jpg') center/cover no-repeat;
  height: 400px;
}

The gradient listed first sits on top. The image listed second shows through where the gradient is transparent. This is the cleanest approach — no extra HTML elements, no absolute positioning. Use it for any element where the image is set as a CSS background.

Common patterns: a dark fade at the bottom (for text legibility), a dark fade at the top (for navigation visibility), or a color wash across the entire image (for branding). Use the gradient generator to generate the gradient portion, then add the image URL manually.

Technique 2: ::before Pseudo-Element (For HTML img Tags)

If your image is an <img> tag rather than a CSS background, use a pseudo-element overlay on a wrapper element:

.image-wrapper {
  position: relative;
  display: inline-block; /* or block */
}

.image-wrapper img {
  display: block;
  width: 100%;
}

.image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8) 100%);
}

The ::after pseudo-element covers the full image area. The inset: 0 (equivalent to top: 0; right: 0; bottom: 0; left: 0) stretches it to match the wrapper. The gradient fades from transparent at the top to dark at the bottom.

If you need content (text, buttons) on top of the overlay, add pointer-events: none to the pseudo-element and position your text with z-index: 1 relative to the wrapper.

Sell Custom Apparel — We Handle Printing & Free Shipping

Technique 3: mask-image — Fade an Image Into a Background

For a different effect — fading the image itself into the page background — use CSS mask-image:

.fading-image {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

The mask uses the gradient's opacity to determine which pixels of the image are visible. Black (rgba(0,0,0,1)) = fully visible. Transparent = invisible. This creates a soft fade at the bottom of the image into the page background — great for editorial layouts, product shots, and hero images that blend into content.

The -webkit- prefix is still needed for Safari support. Both lines together cover all modern browsers.

Choosing Gradient Colors for Image Overlays

Most image overlays use transparent-to-dark or transparent-to-colored gradients. The specific colors depend on your use case:

• Text legibility: transparent 40%, rgba(0,0,0,0.75) 100% — classic dark fade for white text on top of images
• Brand color wash: rgba(99,102,241,0.3) 0%, rgba(99,102,241,0.8) 100% — adds a branded tint that unifies different photos
• Dramatic depth: rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 70% — heavy fade for dramatic portrait-style layouts
• Light overlay: rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100% — white fade for text on dark images

Use the gradient generator to preview the gradient colors before applying to your image. The generator's live preview shows the color transition — adjust transparency stops visually before finalizing your CSS.

Frequently Asked Questions

How do I add a gradient overlay to an image in CSS?

The simplest method: use multiple backgrounds on a CSS background-image element, listing the gradient first: background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8) 100%), url('/image.jpg') center/cover. For HTML img tags, use a ::after pseudo-element positioned over the image.

How do I fade an image into a background color using CSS?

Use CSS mask-image: mask-image: linear-gradient(to bottom, black 50%, transparent 100%). The gradient opacity determines which pixels of the image are visible. Black = fully visible, transparent = invisible, creating a soft fade.

Can I use a colored gradient overlay instead of a dark one?

Yes. Replace rgba(0,0,0,X) with any RGBA color: rgba(99,102,241,0.7) creates a purple overlay, rgba(239,68,68,0.5) creates a red overlay. Use the CSS gradient generator to build and preview the exact color before applying it.

Which gradient overlay technique works with border-radius?

All three techniques work with border-radius. The multiple backgrounds technique inherits the parent's border-radius automatically. The pseudo-element technique needs overflow: hidden on the parent to clip the overlay within the rounded corners.