<h1>Focus</h1>
html {
  height: 100%;
}

$offset: 50%;

body {
  font-family: 'Monoton', cursive;
  font-size: 9vw;
  background-size: 130px 100%;
  background-image: 
    repeating-linear-gradient(-55deg, white, white $offset, #111 $offset, #000);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-weight: normal;
  width: 100%;
  text-align: center;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  background-size: 130px 100%;
  background-image: 
    repeating-linear-gradient(-55deg, #371859, #100821 $offset, white $offset, white);
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.