Dynamic color change while scrolling with CSS

With the help of `mix-blend-mode`, the effect where a fixed or sticky element switches colors based on the background it’s over is really easy to do! There are a few important things to take into account with it, but it’s nothing difficult to deal with!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:28 - Initial setup
00:46 - Making the logo stick
02:07 - Adding mix-blend-mode
03:44 - Making sure it works everywhere
04:56 - Using an image instead of text

#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!

[JaredMeadows]

A missed opportunity in this was to explain the reason we're making it white. In this case, the color is getting **subtracted**. Using (black) means you're subtracting 0, so the element remains invisible (white). On the other hand, when you set it to (white), you're subtracting 255 from the color value. As a result, the element is displayed as black (0) because 255 (white background) - 255 (white element) = 0 (displayed black). Cheers! 🍻

Regardless thank you so much for the video!! Informative and concise as always, Kevin!

[dannymartial]

I’m a professional frontend dev, and I learn so much from these videos. I would’ve never known about mix blend mode on my own.

[Danachew]

I'm literally working on a practice project with overlapping backgrounds as you scroll down. Yesterday I was thinking to myself "Man it would be awesome if I could change up the navigation's font color to keep contrast on different backgrounds..."

[shakilahmed]

Thought its gonna be difficult. But its very easy.
step-1/ make the color of logo white
step-2/ apply mix-blend-mode:difference; to the logo
Thanks for the video❤

[UPLYNXED]

This is a very interesting and clean way to do this!
I've previously done this by having duplicate menu bars and using clip-path, which might still be useful as it does give more control in regards to colors.

Though at the time, the main reason was that mix-blend modes just weren't fully supported yet.

[GilGoldshlager]

You can use CSS filter: brightness(100); or invert(1); to turn your black/colored logo into white without modifying it.

[theojnr-kwyv]

Genius!!
The time you put in to discover and learn these things, just so you can share with us, is amazing!
Thanks❤

[tithos]

Use currentColor in the svg to avoid multiple files

[mikalaybourn]

The only downside to this is that you're expected to have a complete black/white page, for you to successfully use this trick. This is most times not the case for anyone. You will probably somewhere have a bit of color on the page.

[seeker]

Kevin thanks a lot.... Whenever I face a problem in css, I find your videos very useful👍.

[patricksantos]

thank you so much for sharing those "simple" tutorials, you make css looks so easy hehe

[bjgjuiuguoojpoo]

Exactly what I was looking for! THANK YOU MUCH!!!

[blystar]

I will forever salute you. Most of the things I know now is because of you, thank you so much

[joeldcanfield_spinhead]

I've been playing extensively with blend modes in Affinity Photo for the past couple years. Astounding how useful it could be in CSS if I'd remember to use it . . .

[GuebreAdama]

Greta job Kevin! It's very useful!!

[sarahnekam]

Thanks for your great videos! You are a great teacher 😊

[tooFarGonexkhetus]

I usually keep an eye on CSS news, but this time my mind is completely blown. Don't know if this property is new but I have never seen it. Might come really handy in the future

[GaryBarclay]

I click the like before the video starts. Kevin brings CSS satisfaction guaranteed!

[panmrow]

That is absolutely great, but I wonder how would you do something similar, with multiple colours. I saw something like that on a Dropbox page (years ago), I think. It had multiple, different coloured sections. Both logo and navigation were changing the way it does in Your example, but with different colour for each section. I wasn’t able to recreate it.

[Thekidisalright]

This is so simple yet elegant, Thank you so much Kevin!