The Border Image Fill Gradient Overlay is a minimalist CSS technique used to add a decorative or functional gradient over background images. Unlike traditional methods that require extra HTML markup or ::before/::after pseudo-elements, this approach uses a single, underutilized property to enhance text contrast and visual depth.
Core Technique
The “magic” behind this snippet is the fill keyword within the border-image property. Conventionally, border-image only draws on the borders of an element. However, the fill keyword forces the browser to treat the entire area of the element (content + padding) as part of the border-image’s source.
.wrapper {
/* The one-liner overlay trick */
border-image: fill 0 linear-gradient(transparent 50%, black);
background-image: url('image.jpg');
background-size: cover;
}
By setting the border width to 0, we ensure no actual border is visible, but the fill logic remains active. This places the linear-gradient directly on top of the background-image but underneath the actual text content. It effectively solves the z-index struggle often associated with pseudo-element overlays, where text might accidentally get buried under the overlay.
Browser Support
This is one of the most compatible ways to create an image overlay today. It works perfectly in all modern browsers and handles high-density (Retina) displays without additional configuration.
