How to darken pictures in CSS

Learn how to create a darkened image effect in CSS with an example.

Darken pictures in CSS

The filter property in CSS can be used to darken pictures. The syntax is as follows:

img {
  filter: brightness(value);
}

The brightness value can range from 0.0 (completely black) to 1.0 (no change). A value of 0.5 will darken the image by 50%. Here's an example of how to use the filter property to darken an image:

img {
  filter: brightness(0.5);
}

In the example above, the brightness of the image will be reduced by 50%. You can also use the filter property to apply other transformations to an image, such as blur, contrast, hue, and more.