Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.
Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.
box-shadow property
The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset.
<shadow> = inset? && [ <length>{2,4} && <color>? ]
Rocket science?
Not at all, here’s an quick example:
box-shadow: 3px 3px 10px 5px #000;
This CSS declaration will generate the following shadow:
- A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative
length to the left. - The second length is the vertical offset. A positive value for the vertical offset basically offsets the
shadow down, a negative one up. - You’re not allowed to use negative values for blur radius. The larger
the value, the more the shadow’s edge is blurred, as it can be seen above. - Spread distance positive values cause the
shadow shape to expand in all directions by the specified radius.
Negative ones cause the shadow shape to contract. - The color is the color of the shadow.
- The
insetkeyword (missing above), if present,
changes the drop shadow from an outer shadow to an inner
shadow
The above theory it’s just a small amount, if you want to read more, than be my guest and check the W3C specs.
Enough theory, let’s see some stuff!
Now let’s see how can you take advantage of this wonderful CSS3 feature. Below I’ll show you how to enhance your designs with the coolest box-shadow techniques!
Add depth to your body
body:before
{
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
Drop shadows
Here are the articles that inspired me, and not only:
#box
{
position: relative;
width: 60%;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
margin: 60px auto;
}
#box:before, #box:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#box:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Quick tips
Try spicing up shadows with RGBa color. The box-shadow property can be used using CSS3 RGBa colors to create shadows with differing levels of opacity. If your browsers supports the box-shadow property, then it will definitively support the RGBa color mode.
Use multiple shadows in one CSS declaration:
box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;
Browser Support
- Internet Explorer 9/10
- Firefox (from 3.5)
- Safari/Chrome
- Opera (from 10.5)
Final words
You should start using these techniques today and I mean it. Why’s that? Because you can, as box-shadow will not break your layout on older browsers.
Related content
Wow, it’s awesome.
This is very much like the shadow we create in photoshop. Now there no need use the images for this type of shadow, CSS 3.0 is enough for this.
Just one stopper is there to use this, I hope you are getting my point(this is IE…).
Anyways thanks….!!
Thank you for reading this article Ashish!
Indeed, CSS3 can help you achieve great effects without any image slicing.
Incredible post. I can cool it. Thanks for sharing.
Thank you for reading this article. Nice to hear you like it!
I cannot see the blur in my navegator. Only the solid shapes. I’m using rekonq, it uses webkit for rendering :(
Thanks for your comment, I will further investigate this matter.
This article was super helpful to me, thanks alot for posting!
Corey, thanks for reading!
Cheers for referencing me in the article. I was googling for something and ended up here. Strange. Anyway, I see you’re using it on your page. How cool is that? I’ve just written a new piece here about gradients, here: http://playground.genelocklin.com/gradient-hr/ I hope you can find it useful.
Hey Gene, fist of all thank you for sharing this box-shadow technique. I found it very cool and that’s why I decided to give it a try on my website. :)
PS. Nice hr gradient technique!
That is lush!!! Im gonna use that in a project im working on at the moment, thanks
Hi! Very nice indeed!
Is this thing be possible to implement in IE7-IE8?
I really want to know coz I’m starting a project that requires this kind of shadowing.. And i don’t wanna use images.
Thanks and regards
Edward, IE trident doesn’t support CSS3 box-shadow feature.
But with some
filteryou can add simple drop shadows also for IE:filter: progid:DXImageTransform.Microsoft.Shadow(color='#777777', Direction=90, Strength=4);Yet, with IE
filter, you can’t replicate the CSS3 effects presented in this article.On your page the box comes with the nice shadows in IE, but on my page it’s just a simple grey box.
This is a quite general question as well. Often when I see some nice css it works in IE on the original page, but when I try the same on my page it ruins the site.
Great article!!
but when I use this under anoter div that come with background. It’s not work!!
eg.
Lorem…
@pond, add
position: relativeandz-index:1to your wrapper div. That should do it!Awsome effect! But I only see the gray box. The shadows aren’t there. And when i add relative and zindex:1 (or -1) the bars and shadows is in front of the gray box. I suppose they should be behind. How do I get them there.
You can check this: http://jsfiddle.net/catalinred/CEvNk/
It worked. Thank you!
Hi, It works fine on my divs but i have a little issue:
In a site that i’m building I use this box-shadow on the div on the left (700px width) without problems.
But the div #sidebar that contains 3 div .side have an issue.
When i add the code at the .side class .side:before, .side:after and .side:after the shadow is displayed only at the bottom of last div.side and if I apply margin bottom at the div.side the box slide down.
How can i resolve?
Thanks in advance
Gimmy, I’m not sure what is the problem you encounter. If you still need help, feel free to send me an email using the contact page.
Hi, Gimmy, I’m not sure if you have fixed your problem, but I think is quite easy to solve….
you use the same css code for large divs (700px width), and you should use another css code for smaller boxes… i think that you should use 2 different classes…
in the big box case (700px) take alook inside the code to the “max-width:300px;” this attribute will render the nice shadow from left ro right(0 to 300), and from right to left (700px to 400px)… so my suggestion is that if your new box is something like 280px width, create another css attribute but change the “max-width:300px;” to something like max-width:130px; this will do the job :)
This is really cool. Love it.
Nice to hear that Edwin. Thanks!
Good tutorial, so I learned a lot of technical, I intend to write him into my Chinese blog, thank you
Airen, I’m glad that you enjoyed reading this tutorial. Thanks for your comment!
Superb tutorial! It never occurred to me to use :before and :after to create such an effect.
bfintal, thanks for commenting. Indeed, the pseudo-elements are very powerful!
Nice tutorial .Before reading this i always thought that this effect is only possible by background image.
Thanks. And yes, it’s quite cool that now you can do that without using any image.
Incredible wonderful effect!
Thanks tereza! ;)
xixixixi…in here \m/
ty ty ☻
I’m trying to add this cool effect to a slide deck I found here: http://studio.html5rocks.com/#Deck
Adding a basic drop shadow is easy but I’m not having any luck with the cool curved corners. Any ideas how to get your drop shadow effect on these slides??
Joseph, at first sight, you need to to add the above styles for the
.slideelement.Hope that helps!
turns out when I add the .slide:before, .slide:after{} .slide:after{} elements the slide deck doesn’t recognize them?!? if that makes sense…
it was very helpful for me , thank you
I’m glad to hear that Masoud.
Would someone be kind enough to give me some help, I am trying to use this as a header inside a container. When I place it inside the container, one of two things happens. 1) the container disappears or the box/header becomes mis-shaped. The way I have it now, it sits outside & below the container. This is my 1st post here so I don’t know if I’m allowed to post my code. Much appreciated if someone could help. Thank you !
Marcus, if you still have problems, use the contact form and send me a link. God luck!
thank you so much for slick effects
rajasekar, thanks for your comment!
Thanks for your exciting tutorial and its result. I like it very much and I use it (by some modification) in my website to represent some information to user. I’m going to thank you again. It helps me a lot.
As a little addition to the “body depth” piece (which is a lovely touch for any site I think). The following stretches the shadow so it touches the right and left window edges.
body:before
{
content: “”;
position: fixed;
top: -10px;
left: -10px; /* this */
width: 110%; /* and this */
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
:)
can i have the box-shadow property for an image? i’d like to give that effect to a picture of a book, magazine, etc and make it look like it’s on a table…
Morgan, you can add box shadow to an image, but you can’t play with
:beforeand:afterpseudo-elements for an image. The img elements have no content, therefore,:beforeand:afterwill not render anything for theimgelements.The solution is to place the
imginto anspanor something else and begin styling.Good luck!
Wow….These effects are so close to Photoshop effects..thanks for the post..!
Very Nice…Will give it a try today!
just added this to one of my websites in about 2 mins… good work!
Indeed nice work & my compliments!!
Nice to see such work and I’ve even experimented with your tut.
Good luck to see more work from you.
Thanks & reg