Uneven box shadow with CSS3 / HTML5?

Question

I'm trying to create an uneven shadow effect for a website, please see an example below of what I need to achieve:

Unfortunately I don't think this can be done with CSS3, to my knowledge the box-shadow property can only be used to create evenly spread shadows.

However, my knowledge of CSS3/HTML5 isn't great so I was wondering if anybody knows of anyway to achieve this without resorting to images/extra div's/relative & absolute positioning which I would rather avoid?

Answer 1

This is the closest what I've came to your image preview, you can wrap these in a positioned relative div and set the positions accordingly

Demo

HTML

<div class="container"></div>
<div class="shadow"></div>

CSS

.container {
    width: 300px;
    height: 200px;
    margin: 50px;
    background-color: #eeeeee;
    z-index: 1;
}


.shadow {
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
    box-shadow: 0 6px 16px -6px black;
    height: 20px;
    width: 300px;
    position: absolute;
    top: 225px;
    z-index: -1;
    left: 50px;
}

Answer 2

The best i could come up with was placing a pseudo-element behind your div:

div::after{
    content:"";
    display:block;
    transform:rotate(5deg);
    box-shadow:1px 5px 50px #444;
    z-index:-1;
}​

Demo

I guess you want to play a little with the values and try to get as close as possible to your original.