Streaming live at 10am (PST)

Adding blend mode to a button that overlays an gradient animation

Hi everyone!

I’m trying to create some nice looking buttons for my portfolio site.
What I’d like to achieve is a button with the blending mode called overlay reflect the changes in a moving gradient background that it is laying on top of.

Like so:

However I can’t get it to work. I’ve managed to get the blend mode overlay styling to apply to the button but it does not change with the animation (A lottie animation with blur applied to it).

The white background stays completely white, however something is going on with the black text that is placed inside the div…


Here is my site Read-Only: jonathanfristedt.com

Any ideas? Any help is so super appreciated!!

Cheers,
Jonathan