DEV Community

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

Posted on

14 1

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!