Elementor Question posted in
A comprehensive tutorial library can be found here.

mix-blend-mode not working with elementor wordpress website

As my site http://newwebsite.outfit24.com.au (still being built) is heavily image-based, I want the header text colour to change so that it stands out from the background (both dark and light images). I have used Elementor for the bulk building of my site and I’m using the “Custom CSS and JS” plugin to write my CSS and change the header colour. In elementor, I set the header CSS class to “custom-header”.

I have tried using “mixed-blend-mode: difference;” but mixed-blend-mode is highlighted red and doesn’t seem to be working. Here is a screenshot of mix-blend-mode not working: https://ibb.co/MNbf84z

.custom-header a{
    color:#fff!important; 
}
.custom-header {
    mix-blend-mode:difference!important; 
}

I expect for the CSS to work, changing the colour of the header allowing it to be visible whether it’s in front of #fff, #000, and any image on the site but for some reason, mix-blend-mode is highlighted red and isn’t working. Does anyone know why this is happening?

Thanks for your help:)

Tags:

2

Answers


  1. 0

    Blend mode does not work when you have any z-index value for the section or its parent section.

    Login or Signup to reply.
  2. 0

    For anyone who might still need that. I tried using mix-blend-mode in wordpress for a while, being hit by that "unknown property mix-blend-mode" error. As far as I noticed, the css editors provided by wordpress have that error, but if I make my own html section (as many themes support, I guess all of them) and make a <style>.blahblah {mix-blend-mode: difference;}</style>, that makes it work. Worth trying.

    Conclusion: Don’t use wordpress css editors. Use an html section and write styles in it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search