Published on: 16 August, 2013

CSS3 Text Shadow

Posted by andy | 679 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

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

This is example text applied with text shadow properties 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.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.