How to create "mix-blend-mode" with css for text?

Ask the community
, , ,
1

Question:
I want to create a mix-blend-mode for my pinned text in the header. Is this possible with css? Im new to coding, grateful for any tips!

Product:
Wix Studio

What are you trying to achieve:
Landing Page: Text Black / Background White
When I scroll down the background changes to black, so i want the pinned text to be white (otherwise you cant see it lol). Here is an example website with the desired effect: https://studio3000.de/

What have you already tried:
I tried it with this simple css, but didnt work:

.rich-text .rich-text__text {
mix-blend-mode:lighten;
}

i also checked this forum, youtube etc. but didnt find the solution to my problem…

Can anyone help me?

2

Hi, Raffael_Kramer !!

I believe Wix Studio’s text elements are equipped with a blend mode feature, but would it be difficult to achieve this with it? :thinking:

3

Hey “onemoretime”!

Yes true, but unfortunately it doesn’t work with pinned elements…

4

To achieve the effect of changing text visibility based on a background color shift as you scroll, you can use CSS’s mix-blend-mode in combination with scroll detection.

  1. CSS Styling: Apply mix-blend-mode: difference; to the pinned text. This will allow the text to invert its color based on the background—showing black text on a white background and white text on a black background.
  2. Background Change: Use JavaScript to detect the scroll position and dynamically change the background color (e.g., from white to black).
  3. Responsive Text: Ensure that as the background changes, the text color adapts accordingly. You can manage this by toggling classes or styles based on the scroll event.

This method allows for a clean and dynamic effect, with the text blending naturally with the changing background. If you need further assistance implementing this, feel free to reach out for more help.

5

Hey Tech_Voyager!
Thanks for your reply!

Do I understand you correct: You are talking about a gradual color-change effect? Something like this: https://hedrich1.wixstudio.com/black-version ?

But I have this situation:

Mix-Blend-Mode
Mix-Blend-Mode958Ă—852 53.7 KB

It works with normal text thats not pinned (see image) but it does not work with pinned text (like my header “raffa’el webdesign”).
Also I made sure that both text are in the same class…

Here is another example of the desired effect: Mix Blend Mode , smooth animation - Webflow

Do you know what I mean? Any help is very apreciated!

6

I would be glad to help you could we connect over a meeting to discuss all your problems if you are interested, we could connect on fiza@astrosia.in for further discussions and better understanding.

7

What is fiza@astrosia.in? :thinking:
I would rather discuss this topic in this forum…there may be other fellow webdevelopers that have a similar problem and could profit from the discussion or a solution on here :grin:

8

It sounds like you’re aiming to apply a smooth mix-blend-mode effect to your pinned header text, like in the examples you provided, but it’s not working as expected on the fixed (pinned) text. Here’s a simpler way to approach it:

  1. Layering: Since your text is pinned, it might not blend properly with the background because of how it’s positioned. Ensure that the pinned text has a higher stacking order (z-index) than the background, so it can blend correctly.
  2. Applying the Effect: You’ll want to apply the mix-blend-mode to the text itself, but also consider applying it to a container around the text. This will help ensure it reacts with the background the way you want. Try using something like this in your CSS:

css

Copy code

.pinned-text {
    position: fixed;  /* or sticky */
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: black;  /* Default color */
    z-index: 10;  /* Ensures it’s on top of the background */
    mix-blend-mode: difference;  /* Or try other blend modes like 'lighten' */
}
  1. Dynamic Changes on Scroll: If you want the effect to change gradually as you scroll (like in the examples), you can use some JavaScript to update the blend mode or color based on how far down the page you’ve scrolled:

javascript

Copy code

window.addEventListener('scroll', function() {
    const headerText = document.querySelector('.pinned-text');
    if (window.scrollY > 100) {  // Example: when you scroll down 100px
        headerText.style.mixBlendMode = 'difference';
        headerText.style.color = 'white';  // Change text color
    } else {
        headerText.style.mixBlendMode = 'normal';
        headerText.style.color = 'black';  // Default color
    }
});

In short, to make it work:

  • Make sure the pinned text is layered above the background using z-index.
  • Apply mix-blend-mode on the text or its container.
  • Use JavaScript to change the effect as you scroll for a smoother transition.

Let me know if this works for you or if you’d like more help which can be solved over meeting

9
  1. I made sure that the pinned text is higher stacked than the section background
  2. I also tried to add a container to the header and put the text in there. And put mix-blend-mode on both.
  3. It’s not gonna work with that javascript…I want it to change like this: Mix Blend Mode , smooth animation - Webflow

Thanks for your reply anyway, but its still not working…
It seems that with wix it is not possible to make the mix-blend-mode work on pinned elements…:no_mouth:

10

Hi, Raffael_Kramer !!

I’ve done some experiments, and I managed to create something similar to what you’re aiming for. Note that this approach doesn’t use Wix’s built-in blend modes at all. Here’s the step-by-step process:

  1. Place white text inside a section with a completely white background.
  2. Directly below it (in terms of layout), add a black container box. Ensure that the text layer is positioned above the container layer.
  3. Open your global.css file and add the following CSS. Apply this class to the “white text.” After doing so, you should see the text turn black.
.invert {
  mix-blend-mode: difference;
}
  1. Most of the setup is done at this point. Next, apply the “sticky” setting to the text element.
  2. Preview your site, and as you scroll, you should see the desired color change effect on the text.

To complete the design, consider applying a scrolling-based shrinking animation to the text element.

I didn’t have a very good understanding of how blend modes behave before, but answering your question this time has helped me deepen my understanding. Thank you! :wink: :+1:

11

Hey there!

I also tried out some stuff last night and I actually came to the almost same conclusion like you! :grin:

I managed to get the effect with a text pinned to a section. As I understand, it is not possible to apply this effect to a text that is pinned and showed globaly (for example a header)…

So I’m not 100% satisfied with this solution, but for now I am happy with it! :innocent:

Anyway, here is what I did:

  1. Place white text inside a section with a completely white background.
  2. In the global.css file I add this to the text:

.logoText {
mix-blend-mode: difference;
}

.logoText {
position:fixed;
}

  1. Now my mix-blend-mode is applied + the position is fixed (so for me this fixed text works as my header)
  2. Inside of that same section I can add my black container (or any element like images, vectorimages etc.)
  3. Preview your site, and as you scroll, you should see the desired color change effect on the text with any element inside of that section.

However - this “Header”-solution is only compatible with a page that has one section.
And also if I want several pages on my website, I would have to add this “Header”-solution to each page seperatly.

I hope wix is working on making this effect more integrated and easier to apply!
Thank you onemoretime for the support! :pray:

1 Like