Purpose of background-blend-mode in CSS
Hello, can someone explain how background-blend-mode is used and why is it important please. From what I've read, we use it where we have several background images but I didn't really understand how is it used.
5 Replies
it's like when we use our camera to take a picture? Like we can have several effect of the picture, being darkened/whitened etc ?
Can be useful if you need to lighten or darken an image for sure:
https://codepen.io/kevinpowell/pen/qEdqYXo
It can also be good for effects, like if you have a brand color, you could tint the images with it.
There are a lot of creative things you can do with them.
However, it's one of those things that you probably won't use very often at all, but suddenly, you'll run into a fun use case for them and be happy that you know how to do it 🙂
Yep I see, thanks !!
does it matter on which element/div we set up the
background-blend-mode property? Like say I have my body and inside that I have several divs and I want to use background-blend-modeit only blends the background of one element together.
If you want to blend different elements, you'd use
mix-blend-modeyep I see, thanks !