<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.