Text Shadow Property in CSS3

Posted in CSS

With CSS3, creating nice looking titles or headers won’t require Photoshop as it includes a nice text-shadow property to create text-shadows with just a single line of code. To apply text shadow onto an element, add this CSS property in its style definition.

text-shadow: 3px 3px 4px #999;

The text-shadow property looks cool, but it is currently not supported by major browsers including Firefox 3.0, but will be supported in Firefox 3.1 beta. Browsers that support this CSS3 property are Safari 3+, Konquerer, Opera9.5+ and iCab.

For example,

This text will show a drop shadow in Safari, Opera or other supported browsers.

Here first two values are offset of shadow from original text corresponding to right and top offset respectively while third numeric value is the amount of blur radius that causes pixels of the shadow text to stretch by the specified amount.

Positive values for right and top offset will position your shadow to right and bottom while negative values will change it accordingly.

CSS3 Text-Shadow

You can play with offset and blur values to create really nice looking text effects just with CSS. If you have been using this property for a while and created some really nice looking effects, let us know in comments below.



Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

One Response (Add Your Comment)

Comments are closed for this post.