How to Recolor Any Image with CSS background-blend-mode (Lighten)

Introduction

In this article we explore how to recolor any black‑on‑white image using pure CSS by leveraging the background-blend-mode property with the lighten blend mode.

mix-blend-mode vs background-blend-mode

mix-blend-mode works between different elements, while background-blend-mode blends a background image with a gradient within the same element.

Applying background-blend-mode to recolor an image

Assume the source image has a solid black foreground on a white background. By stacking a solid‑color gradient underneath and using background-blend-mode: lighten, the black part adopts the gradient’s colour.

background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;

The gradient can be a single colour or a multi‑stop gradient, allowing the foreground to become a solid colour or a colour transition.

Extending to gradient foregrounds

By using the same technique, the black area can be replaced with a gradient, creating more complex colour effects.

Limitations with transparent backgrounds

The method requires a white background; transparent PNGs blend the overlay colour into the transparent area, producing unwanted results. Therefore the technique works best when the image’s background is white and the foreground is black (or another dark colour).

Compatibility

background-blend-mode enjoys broader browser support than mix-blend-mode , making it suitable for mobile devices.

Conclusion

With just two lines of CSS you can recolor black‑on‑white icons without creating multiple image assets. The approach can be combined with other CSS features such as filter , mask-image , or mask-clip for further visual experiments.