Subscribe to the RSS Feed!

Get the latest posts and updates from James' Blog by subscribing to my RSS feed where you'll be the first to be know when a new post is up!

Subscribe to the feed

Check the archives

Looking for a certain post but can't seem to find it? Go back in time and check the archives where all the posts on James' Blog are stored when their not on the frontpage!

Browse the archives

The Shadow effect in CSS3

Posted on: April 19, 2009 Categories: CSS, Effects, Tutorials

Shadow in website design is something that can be achieved by using CSS and images, to achieve shadow in CSS2 you would use images and positioning, it can be achieved but it usually means that you have to create multiple divs. See my tutorial of creating shadow in CSS2 but one of the exciting new attributes in CSS3 is box-shadow which allows someone to get a nice shadow effect with just using one attribute applied to a div.

As simple as it sounds the box-shadow attribute has very limited implementation in browsers and at this time only Mozilla Firefox 3.1 Beta (Not Mozilla Firefox 3) and Safari 3 + will display the shadow effect that the box-shadow displays. So if you want to see the shadow effect that box-shadow produces and don’t have a browser that has it implemented I suggest you grab a copy of the latest version of Safari or update your Mozilla Firefox installation for the Mozilla 3.1 Beta. If you using Internet Explorer then your screwed.

Okay with that out of the way and my oppurtunity to bash Internet Explorer taken, lets get down to the tutorial.

The box-shadow attribute is similar to attributes like padding or margin, it uses the similar method of defining the top, left, right and bottom areas of a div. For example if you wanted to apply padding to a div you would use a code similar to this:

padding: 0px 10px 10px 5px;

I could of defined each padding value like this:

padding-top:0px;
padding-right:10px;
padding-bottom:10px;
padding-left:5px;

Which also does the same job as the first code, but defining each padding is just creating more work for yourself and if you noticed using:

padding: 0px 10px 10px 5px;

Actually defines the padding in the order of :

1. Top
2. Right
3. Bottom
4. Left

And the box-shadow attribute uses a similar shorthand method, so if you don’t already I’d get used to using the shorthand version. Here is the basics of the box-shadow attribute:

box-shadow: 10px 10px 5px #999;
padding: 5px 5px 5px 15px;

The box-shadow attribute shows the values 10px 10px and 5px. The two values that are 10px are the shadow properties for the right and bottom, the 5px value doesn’t do anything to do with the left, infact the value actually controls the blur of the shadow, oh yes those cheeky CSS3 developers have been clever and have allowed someone to not only control the position of where the shadow would be but also to control how much blur the shadow has:

explained

Here are three examples with shadow and blur differences

Example 1:

.box1 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: 15px 15px 0px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 15px 15px 0px #999;
}

The above code produces this:

shadow 1

Notice the shadow is very crisp and clear, it has no blurring of it’s shadow at all

Example 2

.box2 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: 10px 10px 2px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 10px 10px 2px #999;
}

The above code produces this:

shadow 2

A smaller shadow on this example but notice how there is a slight blur compared to example one this is because the blur is set to 2px which adds a slight blur effect which makes the blur in a kind of out of focus way.

Each example was different and had different shadow sizes and blur settings, but did you noticed that the box-shadow attribute had to be declared twice using the moz and webkit:

-moz-box-shadow: 7px 7px 5px #999; /* For shadow effect to work in supported versions of Mozilla */
-webkit-box-shadow: 7px 7px 7px #999; /* For shadow effect to work in supported versions of Safari */

They both muse be applied in the CSS for the shadow effect to work in both browsers. When CSS3 is fully supported you won’t have to worry about every single browser, you will be able to use the box-shadow attribute for all browsers, but remember CSS3 isn’t fully supported and is still in development due to the many new modules and features that are being loaded in. The reason why we have to use moz and webkit is because Mozilla and Safari use different frameworks and therefore declarations are different.

Example 3 (Shadow on the left):

More examples?! Oh yes! Were not done yet, see all of the above examples showed the shadow effect on right, but what if you want the shadow on the left? No problem the developers have thought of this and come up with a interesting method, we simply take our original starting code:

box-shadow: 10px 10px 5px #999;
padding: 5px 5px 5px 15px;

And add – to the two position values:

box-shadow: -10px -10px 5px #999;
padding: 5px 5px 5px 15px;

This means that the shadow is now on the left rather than the right here’s a example:

.box3 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: -10px -10px 0px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: -10px -10px 0px #999;
}

The above code produces this:

shadow 3

The shadow is now on the left with the use of the negative values.

Example 4 (Shadow on the left):

.box4 {
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: -10px -10px 5px #999;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: -10px -10px 5px #999;

The above code produces this:

shadow 4

Depending on the size of your shadow you will want to adjust the amount of padding accordingly, you don’t actually have to add padding for the shadow effect to work, the box-shadow attribute does all the work, but padding will make your divs look nicer and not squashed up, so I suggest you use padding but really it’s up to you how much you use.

The best way to remember the positioning when using the box-shadow element is that positive numbers will mean the shadow will appear on the right and negative numbers will mean the shadow will appear on the left.

So there we have it, the shadow effect in CSS3, much more powerful than shadow in CSS2 and much easier to achieve!

Click here to see all four examples

I'm James, I'm 18 years old and I'm a freelance website developer from Nottingham, England. I have a passion for website development and have designed websites for a range of clients in my freelance years. James' Blog is my personal blog where I post articles and general posts whenever I can. I typically like talking website development, but you'll find a range of posts and articles here on my blog.

Get Shareaholic

http://andrew-turner.com Andrew Turner

Thanks James, another great article for an introduction to CSS3!
http://www.james-blogs.com James

Thanks Andrew, Im getting really excited about all these new CSS3 modules and features, so I thought I’d pick some of the best ones and show everyone else the awesomeness of CSS3!
http://andrew-turner.com Andrew Turner

Yeah they are great!

P.S: We will have to chat about the direction of AT, as this could be some great content for the site.
http://www.james-blogs.com James

Thanks, and yeah hopefully I catch you on Skype on Wednesday. I won’t be going into school till like 11 AM so although the time difference sucks I’ll most likely get to speak to you then.
http://andrew-turner.com Andrew Turner

If your online and available drop me an email, and if i’m online, I’ll get back to you almost straight away

I’ll be mostly online for the rest of the week aswell.
http://www.sblgraphics.com/clipping-path_service.aspx clipping path

Thanks for your great article. Your article is very informative and accurate! You rule.

Regards,
image clipping
http://photorestorationretouching.com/ photo retouching

I am still new to web scripts, but this article was quite easy to follow! thanks
http://www.james-blogs.com James

Im glad you found my article easy to follow
http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe

[...] The Shadow Effect in CSS3 [...]
http://hirenmodi.wordpress.com/ Hiren

It’s very nice tut for css3 thanks. But is it working in IE6.
http://www.moeiseur.com/design/css3-exciting-functions-and-features-30-useful-tutorials/ CSS3 Exciting Functions and Features: 30+ Useful Tutorials

[...] The Shadow Effect in CSS3 [...]
http://reader.misrit.org/2009/05/css3-exciting-functions-and-features-30-useful-tutorials/ CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Misr IT Reader

[...] The Shadow Effect in CSS3 [...]
http://basit.me/2009/05/css3-exciting-functions-and-features-30-useful-tutorials/ CSS3 Exciting Functions and Features: 30+ Useful Tutorials – Basit – Live Your Life with Inspiration

[...] The Shadow Effect in CSS3 [...]
http://www.nardyello.com Nardyello

@Hiren

It most likely doesn’t and will never work for IE6. Unfortunately, Microsoft isn’t very concerned with most of CSS3. Not even IE8 supports most of CSS3 features.

Maybe later on, but at the moment, Microsoft is leaving us on deep waters to drown. At least they took care of most of the CSS2 with their new browser though.

And not to sound rude or anything, and even though some people still use IE6, but don’t you think it’s time to let go of IE6 by now. One less person using/supporting IE6 will help get more people using newer browsers.
http://www.james-blogs.com James

The box-shadow attribute could not be working in IE6, as it’s not implemented in IE8 let along 6! Just to echo what Nardyello has said, if anyone is still using IE6 then…. Well lets just say even school computers has IE7 installed, so if your still on IE6, do something nice for your Windows Machine and hit the Windows Update link on the start menu. I can’t possibly see why people would still choose to be on IE6. The fact that it can’t deal with .png images was enough to me make me jump to IE7 when I first heard of a Beta or Release Candidate.

Windows update must be screaming at you to update if your on IE6. The only time I’ve used IE6 recently was when I had to wipe my Windows XP machine, and the windows disc I have only includes SP2 for XP, so I had IE6 breifly. I tried a couple of websites for a laugh, it was horrible. Enough said!
http://n3t.ir/devsnippets/the-shadow-effect-in-css3.html The Shadow Effect in CSS3

[...] DIRECT LINK » [...]
http://reader.misrit.org/2009/06/the-shadow-effect-in-css3/ The Shadow Effect in CSS3 | Misr IT Reader

[...] DIRECT LINK » This entry was written by admin and posted on June 1, 2009 at 12:39 pm and filed under Web Desgin. Bookmark the permalink. Follow any comments here with the RSS feed for this post. [...]
http://www.Expression-Web-Tutorial.com Kelly

Great to find another CSS3 Tutorial, even if IE doesn’t support it. No big surprise there.

And I totally agree, If anyone is still using IE 6….geeze….please upgrade. I am at the point that I just will not make any more workarounds for IE 6. IE 6 is one of the worst versions of IE to have ever been released. Upgrade to 8, or better yet, use FireFox. Its so much better, it’s so much faster. And it supports most CSS properties in CSS2.1 and will do the same for CSS3.
http://www.Expression-Web-Tutorial.com Kelly

Oh, hey, wanted to ask you…. You referred to the text shadow as an attribute….is it CSS Attribute or a CSS Property?
http://www.james-blogs.com James

Hey Kelly thanks for your comments.

text-shadow is a property. Where as box-shadow is a new feature so you could just called it a attribute.
http://itechart.com/Pages/Subsections/FlexDevelopment.aspx Flex Guy

Wow very useful. Thanks for sharing !
http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/css3-exciting-functions-and-features-30-useful-tutorials-2/ CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Programming Blog

[...] The Shadow Effect in CSS3 [...]
http://www.free-covers-web.com/stylish-wallpaper/css3-exciting-functions-and-features-30-useful-tutorials-52th-edition/ Free Cover, Graphic, Design, Logo, Image & Photo » Blog Archive » CSS3 Exciting Functions and Features: 30+ Useful Tutorials – 52th Edition

[...] The Shadow Effect in CSS3 [...]
http://infoeduindia.com/2009/06/10/the-shadow-effect-in-css3/ The Shadow effect in CSS3 – Tutorial Collection

[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Wednesday, June 10th, 2009 at 7:04 am and is filed under Css Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
http://www.free-covers-web.com/stylish-wallpaper/css3-exciting-functions-and-features-30-useful-tutorials-62th-edition/ Free Cover, Graphic, Design, Logo, Image & Photo » Blog Archive » CSS3 Exciting Functions and Features: 30+ Useful Tutorials – 62th Edition

[...] The Shadow Effect in CSS3 [...]
http://www.google.com Kelly Brown

Hi, very nice post. I have been wonder’n bout this issue,so thanks for posting
http://www.free-covers-web.com/stylish-wallpaper/css3-exciting-functions-and-features-30-useful-tutorials-71th-edition/ Free Cover, Graphic, Design, Logo, Image & Photo » Blog Archive » CSS3 Exciting Functions and Features: 30+ Useful Tutorials – 71th Edition

[...] The Shadow Effect in CSS3 [...]
http://rapid-dev.net/2009/06/css3-exciting-functions-and-features-30-useful-tutorials/ CSS3 Exciting Functions and Features: 30+ Useful Tutorials | rapid-DEV.net

[...] The Shadow Effect in CSS3 [...]
http://album.amb.com.tw/2009/06/18/css3-exciting-functions-and-features-30-useful-tutorials-3/ AMB Album » CSS3 Exciting Functions and Features: 30+ Useful Tutorials

[...] The Shadow Effect in CSS3 [...]
http://www.kerweb.fr/blog/kerveille/kerveille-1/ Kerveille #1 | Kerblog

[...] The shadow effect in CSS3 : tutoriel mettant en avant un attribut très pratique de CSS3, le box-shadow, qui permet d’obtenir un effet d’ombre sans multiplier les divs ou les images. [...]
http://www.google.com KonstantinMiller

How soon will you update your blog? I’m interested in reading some more information on this issue.
Muthiulhaq

Hi..very good …thanks
http://www.smashingmagazine.com/2009/08/10/mastering-css-advanced-techniques-and-tools/ Mastering CSS: Advanced Techniques and Tools | CSS | Smashing Magazine

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://www.yabibo.com/?p=66 Mastering CSS, Part 2: Advanced Techniques and Tools | YABIBO.COM – YOUR WEB WORLD

[...] The Shadow Effect In CSS3 An overview of using CSS3’s native shadow effect. [...]
http://www.tech7.net/mastering-css-part-2-advanced-techniques-and-tools.html Mastering CSS, Part 2: Advanced Techniques and Tools « Tech7.Net

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://www.webolia.com/2009/08/mastering-css-part-2-advanced-techniques-and-tools/ Mastering CSS, Part 2: Advanced Techniques and Tools

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://www.sandeepmundra.com/2009/08/10/mastering-css-part-2-advanced-techniques-and-tools/ Mastering CSS, Part 2: Advanced Techniques and Tools « Sandeep's Blog

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://www.sandeepmundra.com/2009/08/10/mastering-css-part-2-advanced-techniques-and-tools/ Mastering CSS, Part 2: Advanced Techniques and Tools « Sandeep's Blog

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://www.wpconfig.com/2009/08/11/mastering-css-part-2-advanced-techniques-and-tools/ Wordpress Blog Services – Mastering CSS, Part 2: Advanced Techniques and Tools

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://theblog4.me/shoppingmall/2009/08/11/mastering-css-part-2-advanced-techniques-and-tools/ Shopping Mall » Mastering CSS, Part 2: Advanced Techniques and Tools

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://album.amb.com.tw/2009/08/10/mastering-css-part-2-advanced-techniques-and-tools/ AMB Album » Mastering CSS, Part 2: Advanced Techniques and Tools

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/mastering-css-part-2-advanced-techniques-and-tools/ Mastering CSS, Part 2: Advanced Techniques and Tools – Programming Blog

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://webdesignfan.co.cc/?p=140 Mastering CSS, Part 2: Advanced Techniques and Tools | WEBDESIGN FAN

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://theblog4.me/shoppingmall/2009/08/11/mastering-css-part-2-advanced-techniques-and-tools-2/ Shopping Mall » Blog Archive » Mastering CSS, Part 2: Advanced Techniques and Tools

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://theblog4.me/advertisersblog/2009/08/10/mastering-css-part-2-advanced-techniques-and-tools/ Advertisers Blog » Blog Archive » Mastering CSS, Part 2: Advanced Techniques and Tools

[...] The Shadow Effect In CSS3An overview of using CSS3’s native shadow effect. [...]
http://endorfine.od.ua/?p=367 » Mastering CSS, Part 2: Advanced Techniques and Tools endo – luxury coding

[...] The Shadow Effect In CSS3 An overview of using CSS3’s native shadow effect. [...]
http://myibizalifestyle.com Matt Litherland

Nice Tut, I’m about to use this very technique x
vikas vyas

Hello very good …than x
Anon

“If you using Internet Explorer then your screwed.”

If you’re*

Then you’re*
http://www.james-blogs.com James

Ha ha, thanks for spotting that, still if your using Internet Explorer 8 for CSS3 then your still screwed.
http://instantmessengertutorials.com/ Margit Tift

Howdy could someone tell me their review on a fantastic download torrent service. What paid service would you recommend?
http://www.nekkidblogger.com/2009/12/box-shadows-css3-internet-explorer-ie-8/ Box shadows, CSS3, and Internet Explorer (IE-8) – shadows on bordered text boxes, IE, test, cross browser comparision, | nekkidblogger

[...] CSS3 supports a new “box-shadow” property that can be applied to shadow page elements such as images, SPANs and DIVs. This is great, since it makes it easier to produce good looking frames for images and to nicely off-set boxes in a number of different and stylish ways. [...]
Gopal

how to make shadow transparent ??? which works on all browser ??
http://smashingwebs.com/?p=206 SmashingWebs: Online Show case for Designers » » 50 CSS3 Tutorials That Makes Your Works Perfect

[...] 12. The Shadow effect in CSS3 [...]
http://www.multimediadev.ca/2010/01/17/50-css3-tutorials-that-makes-your-works-perfect/ 50 CSS3 Tutorials That Makes Your Works Perfect – multimediaDev

[...] 12. The Shadow effect in CSS3 [...]
Mel

I wonder how to get a shadow around an entire div.
Any ideas?

Thanx for sharing this
http://designerwall.co.za/2010/03/30-useful-css3-tutorials/ 30+ Useful CSS3 Tutorials | DesignerWall

[...] The Shadow Effect in CSS3 [...]
http://css3menu.com/ CSS3 Menu

Hi, great article! CSS3 shadow is a fancy feature of CSS3 that I very like. I heavily use it in my CSS3Menu GUI wizard, http://css3menu.com/, along with css3 rounded corners and gradients.
cheers!
http://smashingwebs.com/2010/01/50-css3-tutorials-that-makes-your-works-perfect/ 50 CSS3 Tutorials That Makes Your Works Perfect – Smashingwebs

[...] 12. The Shadow effect in CSS3 [...]
http://www.degrama.com/development/master-css3-techniques/ Master CSS3 Techniques

[...] The Shadow Effect In CSS3 An overview of using CSS3’s native shadow effect. [...]
http://www.iwebmonster.net/blog/?p=46 40 CSS effects tutorials | iWebMonster.net Blog

[...] The Shadow Effect In CSS3 [...]