One of the new feature in CSS3 is to add text shadow effect for any text on your website.

Text Shadow Properties

The text shadow will have the following properties.

1. Horizontal Length
   This will be the horizontal distance of the shadow. Example value: 5px;
2. Vertical Length
   This will be the vertical distance of the shadow. Example value: 5px;
3. Blur Radius
   This will be the blur radius distance of the shadow. Example value: 5px;
4. Shadow Color
   The color of the shadow. Note you can use hex value or rgb values, example #000000 or rgba(255, 255, 255). Alternatively if you want to use an extra gradient, you can use this formula rgba(255, 255, 255, 0.5).

Text Shadow Example in CSS3

<style type="text/css">
	.example-shadow{
		-moz-text-shadow: 3px 3px 2px #635f5e;      /* Firefox */
		-webkit-text-shadow: 3px 3px 2px #635f5e; /* Chrome or Safari */
		text-shadow: 3px 3px 2px #635f5e;
	}
</style>
<div class="example-shadow">
	This is example text applied with text shadow properties in CSS3.
</div>

CSS3 Text Shadow

Alternatively, you can see our interactive demo by using our CSS3 Text Shadow Generator.