Realistic CSS3 Box Shadows

Update: Here is a working demo

Update 2: I wrote a design article on designing box shadows in Photoshop for StudentWebHosting.com. Check that out too.

Update 3: I wrote a brand new tutorial which extends on this idea, and creates some pretty slick shadow effects! Check out the tutorial and demo on my biz website: http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/

Want to learn how to create the sexiest most real looking box shadows using pure CSS? Then I’ve got a trick for you. The standard Box Shadow that you can apply via CSS3 to a box is rather bland. It may look something like this.

Note: If you like this effect, please link to my post, don’t steal! Thanks.

boring shadows

Boring Shadows

It is nice and all, and a nice leap from having to do shadows with png background images and such, but it doesn’t quite cut it for me. So with a few tricks, and some magic. We’ll be creating this.

Sexy CSS Box Shadow

Sexy CSS Box Shadow

It gives the effect that the page is “curling” or lifting off of the page. This effect is achieved with PURE CSS and ONE single <div> tag!

Let’s get started.

The first thing we will need to do is set up our HTML. It is as basic as it gets folks.

Step 1

Simply create the following in your HTML document.

Text Here

Now that we have our Box in place, we can do the fancy stuff in CSS. We’ll be using CSS gradients, CSS Box Shadows, and CSS Text Shadows, but the actual trick, or effect comes into play with several “experminetal” css features. Namely: -transform [rotate,skew] and the Pseudo selectors :before and :after. We also throw in some z-index, and other goodies, but my particular effect (which I think I am the first to create) uses SKEW to make it all work.

The CSS Stuff

We need to set up our div via CSS with some basic styles. The following code, sets up our box, gives us a gradient background, gives our box an initial shadow, makes our entire page background gray, and centers our box on screen.

NOTE: I’ve only included the -webkit prefixes which will work on Safari, and Chrome. If you’re working in Firefox, please prefix accordingly. If you have no idea what I’m talking about, then you ought to learn about css prefixes first. Also check out Jeffery’s screencast at NETTUTS for a different sort of shadow but uses some of the same principles.

Step 2

body{
	background-color:#ddd;
}

#box{
	width:300px;
	height:300px;
	margin:50px auto;
	position:relative;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
       -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

Here is what it should look like.

box with Gradient

Simple Box, with CSS shadow and CSS Gradient Background

Step 3

Next we need to add the pseudo selector of :before and :after, which are sort of like “layers” of our box. This allows us to create new shadows and rotate and skew those “layers” separate from our original box. Thus allowing for nifty shadows. Here is the CSS.

#box:after{
	-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
    position:absolute;
	content:'';
	background:transparent;
	bottom:10px;
	right:9px;
	width:70%;
	height:70%;
    -webkit-transform: rotate(5deg)
					   skew(10deg);
}

This takes advantage of the :after selector. We create another box shadow on our new “layer” make its background transparent, rotate it, and skew it, then use css positioning to move it to the bottom right of our original box.

This is what things should look like.

Box Shadow, skewed rotated

:after box shadow: rotated, skewed, and positioned.

I am going to leave the shadow in “front” of our box, so you can see how my magic skew comes into play, to create the more realistic shadow.

Step 4

Next we do almost the same thing, except we use the “:before” pseudo selector, and skew our box at a different angle, and make its shadow “WHITE”. This is the important part, to sell the effect.

Here is the CSS

#box:before{
	-webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
    position:absolute;
	content:'';
	background:transparent;
	bottom:46px;
	right:41px;
	width:50%;
	height:50%;
    -webkit-transform: rotate(20deg)
					   skew(45deg);
	
}

This is what it should look like. You should now be able to see the “ah-hah” of what i’m getting at.

both css box shadows

Boths CSS Shadows, one white, one black

Step 5

The last thing we do is add the z-index to our before and after selectors to move the shadows behind the box, not in front.

Give your :before selector a z-index of -1, and your :after a z-index of -2;

Before

	z-index:-1;

After

        font-family:Arial;
	font-size:3em;
	color:#fffb9b;
	text-align:center;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6),
				-1px -1px 1px rgba(0, 0, 0, 0.4);

And that’s it! This only opens up some of the possibilities of the shadows! By nesting another div or image in our original box we could open up a whole other dimension of fancy shadows and potentially create complex shadows on both sides of the box.

By varying the degree of “blur” in the shadows we can create different levels of depth for sharp or soft shadows. Link to me, as I appreciate the juice.

Sexy CSS Box Shadow

Sexy CSS Box Shadow

Andrew

36 Responses to “Realistic CSS3 Box Shadows”

  1. T

    @FS1 that way IE users can see it.
    thats why all that html5 and css3 stuff is a waste of time – everyone is using IE7 or 8. and that will not change within the next 2-4 years.

    nontheless its a nice demo ;)

    Reply
  2. viznedvesito

    How is this realistic? I cannot imagine a situation where the shadow would drop like that. Can someone please explain?

    Reply
  3. Jambo

    Have to say, although it’s interesting to see that it can be done, I prefer the standard shadows. It adds effect without drawing you attention away from the content too much. Of course, this is just my opinion and I am in favour of simple, clean and elegant design, wheras this would most likely be used on busier (in terms of elements, not traffic) website.

    Reply
  4. RichMiles

    The white shadow throws this off for me. It looks like a shadow of the outline, instead of the actual postit.

    I had a play with this and deleted the #box:before css, and changed the #box:after to;

    -webkit-box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
    position:absolute;
    content:”;
    background:transparent;
    bottom:10px;
    right:9px;
    width:70%;
    height:70%;
    -webkit-transform: rotate(5deg)
    skew(10deg);
    z-index:-2;
    }

    Reply
  5. MaxiWerkz

    @T
    You’re sadly mis-informed. Not everyone is using IE 7 or 8. In fact very FEW people bother to use IE at all these days. The most popular browsers are (and have been for some time now) Firefox and Chrome. Even Opera users outnumber IE users.

    CSS3 and HTML5 is not a waste of time. Why? Because it will push the evolution of web creation further. Because it’s about time everyone started using, and supporting, standardised code. Because it doesn’t work in IE. This means fewer and fewer website designers and coders will support IE over the coming years, forcing Microsoft to FINALLY catch up to the standards everyone expects.

    Why should the rest of us always be pulled back from progress just cos Microsoft are too lazy to keep up to date with current developments? It’s about time they either seriously update and modernise IE, or totally give up with it already.

    Reply
  6. BrianK

    This is a great tutorial Andrew. It’s a very nice way to use the new transform effects. As far as IE, I have to agree with Shaun’s link. Plus, I always figure people browsing via IE don’t care about design anyway, or don’t know better at a minimum.

    Either way, very well done.

    Reply
  7. Rich Wilson

    @MaxiWerkz and @Ahmad Alfy
    http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

    Don’t get me wrong, I hate IE as much as anyone, but the simple fact is that if you’re making a website that has to support 10s or 100s of thousands of users from all over the world, you have to support IE.

    Granted, this type of eye candy is unlikely to be critical to the functionality of a website, but telling people who ask about IE to ‘STFU’ is just moronic (and ultimately not good for business).

    Reply
  8. Doug

    @MaxiWerkz

    Sorry, my website for IT professionals still shows over 50% using IE (6, 7 and 8 combined). It would be foolish to ignore 50% of a tech crowd.

    Reply
  9. Victor

    They shadow would be even more realistic if instead of the white you used a colour that was a darker shade of the post it yellow. As light would bounce off that yellow and hit the page, generating a coloured shadow. Having a darkened border for the the shadow is OK, if you want to fake and illusion that the shadow is in large contrast to the backdrop. Although this optical illusion does occur naturally, painters/artists have been know to exaggerate natural effects and render them more obvious.
    As it is, the white glow in the middle of the shadow would be hard to replicate in nature.

    here is a demo with added curl to the post it and, what I think, is a more realistic shadow: http://victorstan.com/css-effects/post-it-realistic-drop-shadow.html

    Here’s a gist for that: https://gist.github.com/738177

    Reply
  10. Btully

    Interesting and clever use of css3 transforms, but in no way is this “realistic” as the title suggests.
    The shadow implies that only the borders of the post-it are opaque and that the rest is transparent.

    Reply
  11. Ballyhoo Blog

    @FS1 – So everyone can see the effect. I’ll put up a “demo” on a live page with a couple of refinements.

    @Mike – Feel free to use it. PNG images so that all can see the tutorial, regardless of browsers.

    @Gatis – IE 7 and below are not going to pull this off, bit it’s “progressive enhancement” I suppose. Browsers that don’t support it, won’t see it. Browsers that do, will.

    @viznedvesito, @Btully – agreed this isn’t “realistic”, but it is a heck of lot more realistic that the default. If you atcutally study the way a shadow falls from a curling stick it note, there is a light corner. The shadow doesn’t distribute perfectly in one shade of gray across the corner. Hence the trickery here to try and somewhat replicate it.

    @Victor – Agreed. Adding a little “curl” helps to sell the effect.

    @Marius – Thanks. Fixed.

    @Myself – Dang I gotta get updated with nested comments for replying…

    Reply
  12. helium

    This is actually awesome, when css3 becomes standard in all the browsers its going to be coold to see what people come up with

    Reply
  13. Lars Gunther

    Never mind IE and market shares, but how about adding support for Firefox and Opera. They both support CSS 3 selectors, transforms and box shadow.

    And Firefox also does gradients, with a syntax that is closer to what probably will become the standard.

    Reply
  14. Vanna Patierno

    That is for positive a ought to examine :) , thanks for sharing this info i truly appreciate and will attempt out on my unique diligences. thanks a bunch.

    Reply
  15. Ricardo

    Hi folks!

    I applied the -moz-box-shadow but
    I’ve been facing a problem with the z-index in FIREFOX.

    Could anyone help me?

    thanks

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>