CSS to Adjust Image Brightness

CSS can be used to render an image darker or lighter than the natural brightness of the image.

These three renderings of a flowery branch image demonstrate the feature.

The middle image is rendered at the image's natural brightness. As is obvious, the image on the left is darker and the image on the right is lighter.

This is the CSS to render an image at its natural brightness.

filter:brightness(100%);

For a darker image, replace 100% with a percentage below 100. The lower the number, the darker the image. The darker flowery-branch image in the above illustration is specified as 75%.

Contrarily, for a lighter image, replace 100% with a percentage above 100. The higher the number, the lighter the image. The lighter flowery-branch image is specified as 125%.

Here is the HTML and inline CSS for the above images.

<img style="filter:brightness(75%); max-width:100%;" src="https://www.willmaster.com/possibilities/images/possissue202304041236.jpg">
<img style="filter:brightness(100%); max-width:100%;" src="https://www.willmaster.com/possibilities/images/possissue202304041236.jpg">
<img style="filter:brightness(125%); max-width:100%;" src="https://www.willmaster.com/possibilities/images/possissue202304041236.jpg">

When an image needs to be brightened up on a web page, it can be done on the fly with CSS. The image file doesn't change, just the way it is presented.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.