Ask any question about CSS here... and get an instant response.

How can I darken or lighten an image using CSS filters?

Asked on Sep 14, 2025

Answer

To darken or lighten an image using CSS, you can use the `filter` property with the `brightness` function. A value less than 1 will darken the image, while a value greater than 1 will lighten it.

<!-- BEGIN COPY / PASTE -->
    <img src="image.jpg" alt="Sample Image" style="filter: brightness(0.8);">
    <img src="image.jpg" alt="Sample Image" style="filter: brightness(1.2);">
    <!-- END COPY / PASTE -->

Additional Comment:

The `brightness` function accepts a number where 1 is the original brightness.
Values less than 1 darken the image, while values greater than 1 lighten it.
Combining `brightness` with other filters like `contrast` can enhance the effect.
Ensure the image path is correct for the `src` attribute.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I darken or lighten an image using CSS filters?

Asked on Sep 14, 2025

Answer

The Q&A Network