<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;
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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.