CSS Darken Image

Using CSS to darken a picture is a popular way to emphasize specific components, add overlays, or improve visual appeal. It may be used for a number of purposes, such as making superimposed writing easier to read, adding a delicate backdrop effect, or highlighting particular regions of an image. In order to improve the contrast between text and graphics and maintain content legibility, darkening is frequently utilized in web design.

Methods to Darken Image

In CSS, darkening an image may be achieved in a number of ways. Here's a how-to guide using CSS step-by-step:

1. Using Overlay with Linear Gradient

Below given code demonstrates the darkening of the image using the overlay with linear gradient method. It is a very popular method in web development.

Code:

Output:

In this example, an overlay with a linear gradient transitioning from transparent to semi-transparent black is made using the ::before pseudo-element. An overlay with lower alpha values is darker.

2. Using Overlay with Background Color

It is another method using an overlay, but in this case, the background color is used instead of a linear gradient. Here is the code to implement this method if darkening of the image using CSS:

Code:

Output:

Using this method, a solid-color overlay is produced by applying the background-color attribute straight to the image container. Once more, modify the rgba(0, 0, 0, 0.5) values to regulate the degree of darkness.

Select the approach that best fits your needs and style choices. These methods work well for darkening pictures without sacrificing their responsiveness or flexibility.

3. Using filter property

Here is another way to darken an image using CSS, i.e., using the filter property of CSS with the brightness function. The brightness function adjusts the brightness of the image, and setting it to a value less than 100% darkens the image.

Code:

Output:

Here, the brightness level is adjusted to 50% using the filter: brightness(0.5); line, which darkens the image. The darkness level may be controlled by varying the 0.5 value. A picture is made darker with a lower value.

This technique quickly and easily adds darkness to an image using the filter attribute. It's a good choice if you're looking for a simple and adaptable way to darken photos with CSS.

Conclusion

In conclusion, three efficient CSS-based picture-darkening techniques are covered in this article. For the first, a linear gradient overlay is used to create a seamless transition from transparent to semi-transparent black.

In the second, a solid color overlay is applied directly to the image container using the background-color property, which gives you more control over how dark or light an area is by changing the alpha values. The third technique makes use of the filter feature in conjunction with the brightness function, enabling simple and rapid modification of the image's darkness by entering a percentage.

The approach of choice is contingent upon design specifications and aesthetic inclinations; nonetheless, these methods enable designers to produce aesthetically pleasing and captivating online content without sacrificing adaptability or responsiveness.