How to Darken an Image with CSS

If you need to darken (or lighten) images via CSS, you'll be happy to know that modern versions of CSS allow you to do this quite easily.

Here is an image that we will be using:

In order to darken the image, you simply need to select the image via CSS and apply a brightness filter to it, as shown below (this assumes that the image is located inside of a div with a class of container, you can change yours accordingly):

.container img {
  filter: brightness(50%);


This will now apply the filter and the image will look like this: