Shadow Play

dabblet.css

/**
 * Shadow Play
 */
body {
	color: #000;
	background: #fff;
	font-family: arial, sans-serif;
	font-size: 9em;
	font-weight: bold;
	letter-spacing: -10px;
}

#name2 {
	color: rgba( 255, 255, 255, 0 );
	text-shadow: 0 0 0.10em #000;
}
#name2:hover {
	color: #000;
}

#name3 {
	color: #fff;
	text-shadow: 0 0 0.25em #000;
}
#name3:hover {
	color: #000;
}

#name4 {
	color: #000;
	text-shadow:
		0.05em 0 0 hsl( 0, 0%, 10% ),
		0.1em 0 0 hsl( 0, 0%, 20% ),
		0.15em 0 0 hsl( 0, 0%, 30% ),
		0.2em 0 0 hsl( 0, 0%, 40% ),
		0.25em 0 0 hsl( 0, 0%, 50% ),
		0.3em 0 0 hsl( 0, 0%, 60% ),
		0.35em 0 0 hsl( 0, 0%, 70% ),
		0.4em 0 0 hsl( 0, 0%, 80% ),
		0.45em 0 0 hsl( 0, 0%, 90% );
}
#name4:hover {
	text-shadow: none;
}

#name5 {
	color: rgba( 0, 0, 0, .30 );
	text-shadow: 0 0 0.10em #000;
}
#name5:hover {
	color: #000;
}

dabblet.html

<span id="name1">m!les rausch</span>
<span id="name2">m!les rausch</span>
<span id="name3">m!les rausch</span>
<span id="name4">m!les rausch</span>
<span id="name5">m!les rausch</span>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}