.layer.layer-1
.layer.layer-2

:root {
  --red: #ee4d2d;
  --yellow: #ffa604;
  --blue: #16b6fb;
  --dark: #42355e;
}

body {
  margin: 0;
  padding: 0;
}

.layer {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.layer-1 {
  background-image: linear-gradient(to right, white 0, white 50%, var(--red) 0);
  background-size: 40px 100%;
}

.layer-2 {
  position: absolute;
  top: 0;
  background-image: linear-gradient(to top, transparent 0, transparent 50%, var(--red) 0);
  background-size: 100% 40px;
  mix-blend-mode: difference;
}