CLASSIC LETTERPRESS

#letterpress h1 {
	text-shadow: 0px 1px 1px #4d4d4d;
	color: #222;
	font: 80px 'LeagueGothicRegular';
	}
play with the code on dabblet →

ON CLOUD NINE

#cloud9 h1 {
	text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
	color: rgba(255,255,255,0);
	font: 80px 'ChunkFiveRegular';
	}
play with the code on dabblet →

EMBOSSED TEXT

#embossed h1 {
	text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
	color: #9c8468;
	opacity: 0.3;
	font: 80px 'Museo700';
	}
play with the code on dabblet →

Night in the City

#citylights h1 {
	color: #fff;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
	letter-spacing: 5px;
	font: 80px 'MisoRegular';
	}
play with the code on dabblet →

C'mon baby light my fire!

#burning h1 {
	color: #fff;
	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;
	font: 80px 'BlackJackRegular';
	}
play with the code on dabblet →

RETROMATIC

#retro h1 {
	color: #d7ceb2;
	text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
	font: 80px 'BazarMedium';
	letter-spacing: 10px;
	}
play with the code on dabblet →

I am a rock…

#three-d h1 {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 80px 'ChunkFiveRegular';
	}
play with the code on dabblet →

By Duncan Midwinter

Return to the Blog article →
Check out my CSS3 isometric text demo →
Check out my CSS3 animated image captions →