Using the CSS Mixed-Blend mode with Gutenberg

A big hat tip to Justin Tadlock for helping me figure out a nice easy way to accomplish this beautiful cut out text effect in Gutenberg 👇

Scroll down for the CSS 💪

Put this CSS in ‘Additional CSS‘

.is-style-mix-blend-multiply {
    mix-blend-mode: multiply;
 padding:20px !important;
}

Then put this CSS in ‘Additional CSS class(es)’ on the heading you want to create the effect on.

is-style-mix-blend-multiply