Difference Blend Mode Code

Custom code
1

Hi everyone,

I’m trying to apply mix-blend-mode: difference to some text blocks on my Readymag project, but I can’t get it to work and I’m hoping someone here has found a solution.

The setup: I have a few text elements (menu buttons, and social links — email, Telegram, Instagram) sitting over a background image. I want them to blend with the image using the difference blend mode, so the text inverts the colors beneath it.

What I’ve tried:

  1. Adding CSS via Settings → Custom Code → CSS targeting the element by its data-id attribute:
    [data-id=“6a140bf25dfc4771d456f03d”] { mix-blend-mode: difference; }

  2. Adding a JavaScript snippet via Settings → Custom Code → Before to apply the style dynamically, including a MutationObserver to handle Readymag’s dynamic loading.

  3. Setting color: white alongside mix-blend-mode: difference in the JS.

None of these approaches have worked. I suspect the issue may be related to the fact that Readymag renders text blocks inside iframes, which would prevent external CSS or JS from affecting the content inside them.

Has anyone managed to apply mix-blend-mode to text blocks in Readymag? Is there a workaround — for example, using a shape or image overlay with blend mode instead? Any help would be greatly appreciated!

Here is my published project for reference: Project

Thanks!

2

hey… we had this topic a while ago.
e.g. look here

3

hey @Varvara_Godovikova im having the same problem and nothing i do on the other post seems to be working what did you do to get yours working in the end?