How to create a shadow box in css3

Question

I have been looking for ways to create a shadow box as below. Looked up various tutorials online and can't seem to get it working.

enter image description here

I am trying to create a shadow box as above for my website, but i dont know how to get the number of pixels right for the center of the box.

How should the CSS3 be? Any help would be great in helping me.

Thanks a bunch.

• Devang Rathod: you can use box-shadow css property for that.
• Jeiman: Yes i know, but im trying to get the box shadow to not appear in the bottom middle of the box as shown in the picture. Just finding it hard to remove it.
• Spudley: possible duplicate of how to achieve this css3 shadow effect?
• Spudley: I've marked a duplicate question, which asked for pretty much the same effect, and has answers that link to several sites with good examples. Another example here: red-team-design.com/…

Answer 1

Check this demo that I did a year ago.

And this simplified version that I did right now.

HTML: <div class="box"></div>

Relevant CSS:

.box {
 width: 20em; height: 6em;
 border: solid 1px #ccc;
 position: relative;
 background: white;
}
.box:before, .box:after {
 min-height: 45%; width: 65%;
 border-radius: .2em;
 box-shadow: 0 0 .625em rgba(204,204,204,.4);
 position: absolute;
 z-index: -1;
 background: rgba(204,204,204,.4);
 content: '';
}
.box:before {
 bottom: 0; left: .3em;
 transform: rotate(-5deg);
}
.box:after {
 right: .3em; bottom: 0; 
 transform: rotate(5deg);
}

You don't need to get the number of pixels. You can use % values.

Answer 2

The technique is applied to a single element. A couple of pseudo-elements are generated from this element and then pushed behind it , like #box:before, #box:after . These pseudo elements are than positioned explicitly . You then have to apply the css3 box shadow to these elements and apply transforms. Read more about them on the following sites :

http://nimbupani.com/drop-shadows-with-css3.html
http://nicolasgallagher.com/css-drop-shadows-without-images/
Also the below code is from http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
The Html

<div id="box">
 <p>Content and content</p>
</div>

The css :

 #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;
 }

Answer 3

In html5, there's the box-shadow property for producing such shadows... Earlier it required flash or photoshop to create such a thing...

This should be helpful: It has all the other features too...

http://w3schools.com/css3/default.asp

Answer 4

This kind of shadow is not so far possible in CSS3, the solution to this is by creating an external image of shadow and then apply it the background-image to the element.

Also you can find Photoshop actions for creating realistic shadows, then use it as the background image to add depth..