Shadow Effect with CSS3

Shadow text

If you are using Firefox 3.5+, Opera 9, Safari 1.1 or a pretty new version of Google Chrome, you will see some shadows around the text above. That's all done with CSS. This is the code used for the above font:

{ text-shadow: 2px 2px 2px #BFBFBF; }

Playing around with this, you can achieve some other cool effects like:

Some random text

{text-shadow:0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;color:#fff;}

text-shadow was included in CSS2, removed from CSS2.1 and returns in CSS3. Also, CSS3 introduced the box-shadow property which is supported by Firefox 3.5+, Safari 3.1 only:

There should be a nice grey fading shadow under this box..

CSS for the above shadow box:

{ box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; -moz-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; background-color: #EEEEEE; }

Or this:

There should be a hard black shadow above this one, and the shadow should follow the rounded corners.

Which has the following CSS code:

{ box-shadow: -10px -10px 0px #000; -webkit-box-shadow: -10px -10px 0px #000; -moz-box-shadow: -10px -10px 0px #000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 5px 5px 15px; background-color: #EEEEEE; }

Note: Adding -moz- and -webkit- in front of box-shadow and border-radius is required so that the shadow and rounded corners will render proprely in Firefox and Safari.

In case you don't use a CSS3 compatible browser, here is a screenshot of Firefox 3.5 browsing this post:

For creating advanced text-shadow and box-shadow, try this website.