I can't figure out how to get mix-blend-mode to work with shadows

Question

This is what the screen blend mode should do:

this is what my css does: https://codepen.io/Thisisntme/pen/LYGypRz

* {
    mix-blend-mode: screen;
}
body {
    background: black;
    mix-blend-mode: screen;
}
h1 {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 12vw;
    color: White;
    
    mix-blend-mode: screen;
    
    z-index: 1;
    text-align: center;
    text-shadow: 5px 10px 5px #FF0000, -5px 10px 5px #00FF00,5px -10px 5px #0000FF;
}

<h1>testing testing</h1>

what am I doing wrong?

you need to have 3 seperate element to get a blend effect – Temani Afif Jun 22 '20 at 22:05 — Temani Afif, Jun 22 '20 at 22:05

score 1 · Accepted Answer · answered Jun 22 '20 at 22:19

Consider pseudo element to be able to duplicate the text and the mix-blend-mode will work fine:

body {
  background: black;
}

h1 {
  font-family: "Work Sans", sans-serif;
  font-weight: bold;
  font-size: 15vw;
  color: White;
  display: table;
  margin: auto;
  position: relative;
}

h1::before,
h1::after,
h1 span::before,
h1 span::after {
  content: var(--text);
  mix-blend-mode: screen;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
/* this will define the dimension of the element*/
h1::before {
  position: static;
  color: transparent;
}
/* */

/* Below your 3 layer of text */
h1::after {
  filter: blur(2px);
  color: #FF0000;
  transform: translate(5px, 10px);
}

h1 span::before {
  filter: blur(2px);
  color: #00FF00;
  transform: translate(-5px, 10px);
}

h1 span::after {
  filter: blur(2px);
  color: #0000FF;
  transform: translate(-5px, -10px);
}

<h1 style="--text:'testing'"><span></span></h1>

@10Replies change the transparent color with a white color ... you will see 4 layers and one of them have transparent color — Temani Afif, Jun 22 '20 at 23:10

I can't figure out how to get mix-blend-mode to work with shadows

1 Answers1