CSS Mix Blend Mode on Element

  • hashwagon

    (@hashwagon)


    5 months ago

    I have a container configured as a button in my hero section that is using the following CSS to “knock out” the text in the button so my dynamic gradient as the hero background is seen as the text of the button.

    /* Knockout Text – https://www.w3schools.com/howto/howto_css_cutout_text.asp */
    .knockout-text {
    mix-blend-mode: screen !important;
    }

    For anyone that doesn’t know, it delivers an effect like this.

    With that, when I apply the same process to a button element that is hooked into the header as menu-bar-items it doesn’t “knock out” the text. I’ve tried a number of different CSS selectors (such as: .main-navigation .menu-bar-items .gb-container .gb-container-link .knockout-text) as well as playing around with Firefox’s dev tools and I just can’t figure out what’s going on.

    • This topic was modified 5 months ago by hashwagon.
Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.