How to darken/lower background image highlights with css?

Question

I have a few images similar to this one: As you can see, there is a large difference between the shadows and highlights in the image. Most of the image is ok to put white text over, but sometimes my text goes over a bright spot, making it unreadable, so I want to lower the brightness of only the image's highlights (like you can do in most standard photo apps) using css, while keeping the shadows and mid-brightnes areas as they are. I can find lots of help on how to darken an entire image, but nothing on how to darken only the highlights. I was thinking background-blend-mode might work, but I have no idea how to use it, or which effect would be right.

Answer 1

You're right, background-blend-mode may be your simplest option! For more information about background-blend-mode, click here, but it more or less combines all of an element's background images by using a set of blend modes. For a description of the different blend modes, click here.

In the example below, the important lines are:

background-image: url("https://i.stack.imgur.com/tMO8g.png"), url("https://i.stack.imgur.com/tMO8g.png"), linear-gradient(hsl(0 0% 50%) 0 100%);
background-blend-mode: color, darken, normal;

These lines do the following:

• It gives the div three images: two that are your image, and one that is a solid color with a lightness of 50%.

• It applies the 'color' blend mode to the first image, the 'darken' blend mode to the second image, and the 'normal' blend mode to the solid color.

This means that the second image's lightest color will match that 50% lightness solid color, and the first image will restore the color that was lost when doing so.

Unfortunately, this does not work with transparent images, as the transparency will most likely be replaced with the solid gray color created by the linear-gradient().

div {
 display: flex;
 width: 15ch;
 height: 12ch;
 justify-content: center;
 align-items: center;
 font-size: 5em;
 color: white;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;

 background-image: url("https://i.stack.imgur.com/tMO8g.png"), url("https://i.stack.imgur.com/tMO8g.png"), linear-gradient(hsl(0 0% 50%) 0 100%);
 background-blend-mode: color, darken, normal;
}

<div>Hello, World!</div>

Hopefully this solution is useful to you!