<div class="spotlight-container">
	<div class="spotlight-text">spotlight</div>
</div>
body {
	height: 100%;
	width: 100%;
	text-align: center;
	background-color: #f9f8f8; //white-ish
}

.spotlight-container {
	line-height: 100vh;
	background: #3F3F40; // grey-ish
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	display: inline-block; 
}

.spotlight-text {
	text-transform: uppercase;
	background: #e18425; //orange
	font-size: 88px;
	font-family: 'Playfair Display';
	-webkit-background-clip: text;
	width: 100%;
	height: 100vh;
	animation-name: fill-color;
	animation-duration: 2s;
	animation-timing-function: linear;
	font-weight:900
}

@-webkit-keyframes fill-color {
    from {width: 0;}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Pathway+Gothic+One
  2. https://fonts.googleapis.com/css?family=Roboto
  3. https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300
  4. https://fonts.googleapis.com/css?family=Playfair+Display

External JavaScript

This Pen doesn't use any external JavaScript resources.