DEV Community

Cover image for Darken image with tailwind css.
Sohanur Rahman Emon
Sohanur Rahman Emon

Posted on

Darken image with tailwind css.

Sometimes making the background image darken becomes difficult for the newbies.

Let us simplify that even with a css framework like tailwind css.

Considering the following
code:

Image description
snapshot:
Image description

Now let us make this darken by adding brightness filter.
code:
Image description
snapshot:
Image description

As simple as that. This is more than easy.

Top comments (4)

Collapse
 
clementklenam profile image
clementklenam

this was very helpful Thanks

Collapse
 
boitumelo_ngwenya_de profile image
Boitumelo Ngwenya

Very helpful

Collapse
 
miraz66 profile image
MD.MIRAJUL ISLAM

thank you ...it's a good working

Collapse
 
8koi profile image
Hachikoi • Edited

Good however, by doing this I cannot make use of the Imager component from nextjs.. any idea anyone?
WELP brightness-50 works just as well in the Image component directly!