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.
Recommended Links: