<h1>
	Using Text Shadows To Create a Focus Effect
</h1>
@import "compass";
@import url(https://fonts.googleapis.com/css?family=Orbitron:700);

$text-color: darkorange;
$bg-color: #111111;

body {
	padding: 2em;
	background-color: $bg-color;
}

h1 {
	font-size: 3em;
	font-family: 'Orbitron', sans-serif;
	color: transparent;
	text-align: center;
	text-shadow: 0 5em 200px $text-color;
	@include animation(shadowfocus 4s infinite);
}

@include keyframes(shadowfocus){
	0%, 100% {
		text-shadow: 0 0 90px $bg-color;
	}
	25%, 75% {
		text-shadow: 0 3em 1px $text-color;
	}
}
View Compiled
/*
Twitter: @digsite_
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.