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:

Setting css :

First we lower the opacity of the pic

img {
opacity: 0.5;
}

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;
}

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;
}

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);
}

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

Comments

[Sohanur Rahman Emon]

It is really cool

[Ritvik Dubey]

That's really helpful 🙌

[Nazanin Ashrafi]

Thank you 😍🙌🙌

[Joseph]

thank you so much, this came very handy.

[Nazanin Ashrafi]

I'm glad it was helpful 🙏🙏

[enesstr]

third section helped

[E-Robin]

Thanks for this code It really helps creating my first website

[Sk Selim]

Thankyou 🙂

[EmbedConner Code]

Thanks for your help!

[Nazanin Ashrafi]

I'm glad it was helpful ^_^

[shahryar slg]

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 :)

[Nazanin Ashrafi]

Glad to here it was helpful ^_^

[Dusty Shaw]

Thanks, just used this at work :)

[Dipesh Joshi]

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