Logo/Text Header mix blend mode

Store Design
, , ,

Topic summary

A user wants to create a transparent header with white text and logo that changes color when scrolling and interacts with a background video, similar to the effect on innerselfrunning.com.

Current Issue:

  • Attempted using CSS mix-blend-mode: difference but the text/logo only interacts with the header background, not the underlying video content
  • The desired effect should make elements blend with content behind the header as users scroll

Status:

  • Original poster shared their in-progress site (bangingclub.com) for troubleshooting
  • Another user expressed interest in implementing the same effect, specifically for their homepage header
  • No solution has been provided yet; the discussion remains open with users seeking CSS guidance
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have a transparent header with white text/logo. I want to make it change color when scrolling down and interact with my background video.

Here’s a exemple: https://innerselfrunning.com/

I tried CSS code with mixblendmode:Different; but the text and logo only interact with my header background

2

What’s your own website?

3

I’m still building it but there you go

https://bangingclub.com/

4

Can you share the solution? I want something similar. I need the logo and the header menu text to be this way (only on the homescreen).

I’d appreciate the help

5

Screenshot 2025-03-28 at 12.26.15 PM.png
Screenshot 2025-03-28 at 12.26.15 PM.png1903×179 213 KB

adding a screenshot of my header for reference .