body {background-color:#222;}
article {
  display:block;
  position:relative;
  margin:10% auto 0 auto;
  max-width:60rem;
  padding:0 1rem 0 1rem;
}
h1 {
  font-family: 'Roboto', sans-serif;
  font-size:5rem;
  color:transparent;
  
  &:before,
  &:after {
    content:attr(name);
    position:absolute;
    top:0;
    left:1rem;
    pointer-events:none;
    user-select:none;
  }
  &:before {
    color:white;
    -webkit-mask-image:linear-gradient(130deg, #222 50%, transparent 50.5%);
    mask-image:linear-gradient(-130deg, #222 50%, transparent 50.5%);
  }
  &:after {
    color:tomato;
    -webkit-mask-image:linear-gradient(310deg, #222 50%, transparent 50.5%);
    mask-image:linear-gradient(-130deg, #222 50%, transparent 50.5%);
  }
}