How to use mix-blend-mode, and how to avoid problems with it

You don't hear a lot about mix-blend-mode, but after mentioning it in a previous video, a lot of people asked for something more in-depth, so here we are!

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:39 - The basics of mix-blend-mode
05:25 - Issues with text
08:29 - Using isolation
09:56 - opacity vs mix-blend-mode
11:50 - more on isolation

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[zachjensz]

6:50
Kevin: My favourite thing in the world which is a Pseudo Element
Kevin's Kids: 😢

[srinathmuthusamy]

I haven't used CSS mix blend mode but hope that's useful waiting for the premier

[TheZamirOrion]

You are definitely the best, interesting, in-depth and at the same time bite-sized ressource.

Thank you so much.

You made me love CSS again.

[Mark_MKII]

Thanks for the video - it's crazy how much you can do with CSS now!

To clarify one point, 'multiply' darkens the image by 'multiplying' the color values of the upper layer onto the lower layer (not just letting darker pixels through). Even pixels from the lower layer that are darker than the upper layer are darkened *further*. Not sure about CSS, but in Photoshop the 'darken' blending mode is closer to what's described in the video.

[crunckNATIon]

This came right on time to my suggested videos...now I'm going to watch the css blend modes

[valeriomattera]

Brilliant, just yesterday I used mix blend mode at work and this video gave me a better understanding of its use. Thank you!

[Colstonewall]

You are the "CSS KING." No doubt about it.

[rhvsingh]

Today, I was searching for mix-blend-mode and found some useful information and now you made a video on it. Now I will master it. 😄😄😄

[lindascoon]

css is so painful, thank you for helping ease the pain a little

[shubhamsingh]

I have used mix-blend-mode a lot but could not figure out the gradient look. Thank you Kevin.

[tushardorale]

You are amazing!!!
Because of you I'm falling in love with CSS ❤️

[francolamattina]

Love your content, really enjoyable for learning and entretainment. Thank u!

[Stoney_Eagle]

I don't see that being used anywhere but it looks really good.
I'm fixated on that scroll animation hehe, looks like a pool ball kicking another 🎱

[theman]

Ohh that isolation is such a handy tip. Thanks, man ✌🏽😁

[mdshadab]

Great! CSS property
Love to learn CSS from U
Love❤❤ from India🇮🇳

[peternicholson]

Definitely need to be using this more in my hero sections. Good share and great expansion as always chief

[Norell]

The timing... synchronicity. Thank you for this. :)

[bramvanoverveld]

the "mix-blend-mode: difference", is to take the opposite of each color, so on 4:32 you see a black screen because the default screen on photoshop is white

[Aabara_ka_dabara]

what is the diffrence between background-blend-mode and the mix-blend mode? can you please tell me or make a video on this.

[meghakg]

Hey, Kevin! Learning sooo much from your videos. It's fun, love your videos. Thank youuu😇🙏