Skip to navigation

Text shadows

Shadows. On text.


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Text shadows</title>
		body {
			font: 20px/2 "times new roman", times, serif;
			color: #000;
		h1 {
			text-shadow: -2px 2px 2px #999;
		em {
			font-weight: bold;
			padding: 8px;
		#elephant {
			color: #eee;
			background: #999;
			text-shadow: 2px 1px 0 #000;
		#plesiosaur {
			background: #bde;
			color: #06c;
			text-shadow: 0 -3px 1px #fff;
		#tourist {
			color: #efa;
			background: #be0;
			text-shadow: 0 0 4px #360;
	<h1>A little tale accompanied by a little text shadow</h1>
	<p>In Botswana's Chobe National Park, <em id="elephant">an elephant with an especially large trunk</em> is minding its own business when <em id="plesiosaur">a plesiosaur with five heads, two tails, and the legs of a lion</em> falls out of the sky and lands on the elephant's back.</p>
	<p>"Hah hah! That's hilarious!", says the plesiosaur, "Your trunk is huge!"</p>
	<p><em id="tourist">A stunned tourist in a nearby Jeep</em> drops his camera, stares in amazement, and excitedly taps his wife on the shoulder.</p>
	<p>"Look, honey! That's amazing! The talking prehistoric marine reptile with five heads, two tails, and the legs of a lion that fell out of the sky is right! That elephant's trunk is ginormous!"</p>

	<!-- Link back to HTML Dog: -->
	<p><a href=""><img src="" alt="HTML Dog"></a></p>


View original