DEV Community

Nazanin Ashrafi
Nazanin Ashrafi

Posted on • Updated on

How to Darken an Image with CSS

There was a time when I had to look everywhere to find out how to make images darker and now I know 3 ways to do this. so lets get to the point.

1. Using opacity :



Setting the basic:

This is the original pic:
Mamamoo Solar



Setting css :

First we lower the opacity of the pic



img {
opacity: 0.5;
}


Enter fullscreen mode Exit fullscreen mode

By setting the opacity to 0.5 , the images will turn white(ish)

Now all we need to do to make it darker is to change the background color to black :



ul {
background-color: black;
}


Enter fullscreen mode Exit fullscreen mode



We can use this to create cool hover effect. you can check out the pen that I made

2. Using filter property:

Just use filter: brightness(50%); for the image to lower the brightness.

3. RGBA colors:

Let's say you want to set an image as as background. if you don't darken it ,everything you put on the image like buttons, texts etc will not look cool. you need to darken it to make other stuff stand out
So how do we do that?
It's simple. let me show you

Setting the basic:



header {
    width: 100%;
    background-image: url(EauDp1hUcAAE-bK.jpg);
    background-position: center;
    background-size: cover;
}


Enter fullscreen mode Exit fullscreen mode

For making it darker, we add linear-gradient(black,black).
Choose a color and lower the transparency of the color



header {
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(EauDp1hUcAAE-bK.jpg);
}


Enter fullscreen mode Exit fullscreen mode





To sum it up :

  • Use opacity and filter property to darken an image and create cool hover effect with it.
  • Use RGBA colors to make your background image darker.

You can connect with me on twitter

Top comments (15)

Collapse
 
sohanemon profile image
Sohanur Rahman Emon

It is really cool

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

That's really helpful 🙌

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you 😍🙌🙌

Collapse
 
therepositor profile image
Joseph

thank you so much, this came very handy.

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

I'm glad it was helpful 🙏🙏

Collapse
 
enesislam profile image
enesstr

third section helped

Collapse
 
erobin profile image
E-Robin

Thanks for this code It really helps creating my first website

Collapse
 
sk_selim_32adf2f9f5ccbc97 profile image
Sk Selim

Thankyou 🙂

Collapse
 
embedconner profile image
EmbedConner Code

Thanks for your help!

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

I'm glad it was helpful ^_^

Collapse
 
slgshahryar profile image
shahryar slg • Edited

Thank you for your great post. it helped me.
And I got cheerful when I saw the first search result Is an Iranian's article, Congratulations :)

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Glad to here it was helpful ^_^

Collapse
 
dustyshaw profile image
Dusty Shaw

Thanks, just used this at work :)

Collapse
 
dipeshj2310 profile image
Dipesh Joshi

this is helpful today I'm searching on google and its leads to your Artical.