Reducing Image Brightness with CSS

When I first started out in front‑end development, the release of Internet Explorer 5.5 was widely celebrated as Microsoft introduced a vast number of registry‑based visual effects via the (then‑proprietary) filter tag. You could even include animations and combine the two together with basic scripting (important to note: not JavaScript) to create visual shifts between different states, right there in the browser!

The documentation for this is all still online and continued to be supported all the way up to Internet Explorer 9. Whilst Microsoft and Internet Explorer have long been the butt of web development jokes, and the antihero in many young front‑end developer's nightmares, they really did pioneer what we now take for granted in CSS2.1 and CSS3.

CSS filter effects are now extremely well‑supported in all but ‑ ironically ‑ Internet Explorer browsers, mainly because their version was a bit different. For example, making an element 50% transparent was as simple as:

.classname {  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}

One of the most useful filter properties is brightness(), which is a great way of editing the appearance of an image in‑browser. Quite simply, brightness() is a filter function which accepts an amount‑value (either decimal or percentage) where:

• 0 (or 0%) is absolutely black;
• 1 (or 100%) is unfiltered ‑ the image doesn't change;
• anything above 1 (or 100%) will brighten the image.

For example:

.alfaromeo-1{  filter: brightness(0.5);  // or filter: brightness(50%);}.alfaromeo-2{  filter: brightness(1);  // or filter: brightness(100%);}.alfaromeo-3{  filter: brightness(1.5);  // or filter: brightness(150%);}

Animate brightness()

As you will probably already know you can also animate brightness() as you would any other filter states by combining it with the transition property and then switching a classname or state to cycle from one to the other. As with any CSS‑based animation you do still need to set the starting value for the filter, even if it is 1, and therefore unfiltered:

Reducing Eye Strain in Images in Dark Mode

I'm sure many of us have been viewing a website in 'dark mode' when a bright white image comes into view and leaves you with kaleidoscope vision. One really convenient use for brightness() is reducing and removing that strain on your visitors' eyes when in dark mode.

Reducing the brightness of an image slightly and increasing the contrast will result in a much more pleasant experience for your users and can be implemented very simply. I also like to include a transition between states here (the first ruleset below) but you could just as easily get away with simply using the second @media rule:

img {  filter: brightness(1) contrast(1);  transition: filter 50ms ease-in-out;}@media (prefers-color-scheme: dark) {  img {    filter: brightness(0.9) contrast(1.1);  }}

It probably goes without saying that if you're not using a prefixer, then you will also need to use suitable browser prefixes to your CSS, as required by your user base. Here is what that same image looks like in both states:

The effect is very subtle, but when the rest of the screen is dark the difference to the amount of exertion an image can cause to your visitor's eyes is significant. Perhaps a little ironically, if you are viewing this page right now in dark mode, then all the example images below are already at 90% darkness!

Don't forget too that you can apply filter to just about anything. I've only discussed images here but there is no reason you could not use it on just about any HTML element...

The photograph of the beautiful Alfa Romeo Giulia used within this article comes from Aleks Marinkovic's excellent collection of photographs on Unsplash ‑ even if he had inexplicably tagged it as a BMW!