How to Darken a Background Image with CSS

Why Darken Background Images

Darkening a background image improves text readability and visual hierarchy by reducing luminance variance between the image and overlaid content. This evergreen explainer covers reliable, maintainable CSS approaches that work across modern browsers and preserve design intent without replacing the original image.

Approach 1: Pseudo-element with background-color

How it works

Place an absolutely positioned pseudo-element (::before or ::after) on the container, size it to cover the background image, and apply a dark background-color such as rgba(0, 0, 0, 0.35–0.6). The pseudo-element stacks behind the content but above the background image, creating a consistent overlay.

Example and values

Use position: relative on the container and position: absolute on the pseudo-element with inset: 0 (or top/right/bottom/left: 0). Example: background-color: rgba(0, 0, 0, 0.5); on the pseudo-element produces a moderate, adaptable darkening that preserves image context while lifting contrast for text.

Approach 2: CSS gradient overlay

How it works

Apply a linear-gradient or radial-gradient directly on the background layer, stacking above the image via background-image. Gradients act as a tint and can be tuned for subtle or pronounced darkening by adjusting color stops and opacity.

Example values

background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45)), url(path/to/image.jpg); provides a smooth, progressive darkening that can be responsive without extra markup.

Approach 3: Mix-blend-mode and backdrop-filter considerations

Blend modes

mix-blend-mode can darken an element based on underlying pixels, but using it for background image darkening is less predictable and harder to control than pseudo-element overlays. Prefer stable layering (pseudo-element or gradient) for consistent results.

Backdrop filters

backdrop-filter: blur() darkens perceived contrast of content behind it, but it affects everything behind the element and may not darken the background image itself. Use deliberately and test across devices.

Accessibility and contrast

Measuring contrast

Darkening aims to achieve sufficient contrast between text and background. Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text relative to the final background where text sits. Use one of the approaches above and validate with automated tools and visual checks.

Testing in context

Check combinations of image content, brightness variance, and overlay opacity. Ensure readability across image-heavy sections and avoid assuming uniform lighting across the photograph.

Implementation checklist and practical notes

Choose an approach based on maintainability, browser support, and design needs. Pseudo-element overlays are widely supported and easy to tune; gradients offer compact one-declaration solutions; avoid relying on blend modes for critical contrast. Verify results with real content and accessibility audits.

Summary of common darkening options