Course lectures : 1 of 1

Text with shadow using CSS

Last updated: 21st June 2007

text shadowcss text shadow

This tutorial explains how to create a text with shadow using CSS. It has been tested and works with the following browsers:

  • Firefox 2.0.0.4 +
  • Internet Explorer 6.0 +
  • Mozilla 1.7.13 +
  • Opera 9.21 +
  • Netscape 8.0.4 +

First let's create a structure of our text container together with a text.

<div id="wrapper">
	<span class="firstlayer">Text with shadow using CSS</span>
	<span class="secondlayer">Text with shadow using CSS</span>
</div>

Now we are going to apply some formatting using CSS. We are applying a position: relative; to the text container (#wrapper). This way all other elements within #wrapper which are using absolute positioning will be positioned relatively to the #wrapper not the body tag. Then firstlayer and secondlayer get their absolute positions with secondlayer being 2px lower and to the right. At the end we need to apply z-index to indicate which layer should be on top of the other.

html, body {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: #111;
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	text-align: center;
}
#wrapper {
	width: 700px;
	height: 200px;
	margin: 20px auto 20px auto;
	padding: 0px;
	text-align: left;
	position: relative;
}
.firstlayer {
	font-size: 38px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
}
.secondlayer {
	font-size: 38px;
	font-weight: bold;
	color: #666;
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 0;
}

And that's it.

COMMENTS

If you'd like to include code example please wrap your code within <pre><code> tags.


<pre>
<code>
function fullName(firstName, lastName)
{
    return firstName + ' ' + lastName;
}
</code>
</pre>