Box shadow effect

Problem

I'm trying to apply a shadow to a div, however I have been unable to achieve the desired effect. Effect to be 'below' the element.

Example: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

JSFiddle: http://jsfiddle.net/Ck7pG/

CSS

ul#nav li {
    display: inline;
    line-height: 40px;
}

 /* Shadow effect */
.shadow-effect {
    position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.shadow-effect:before, .shadow-effect:after {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    top: 20%;
    bottom: 0;
    left: 50px;
    right: 50px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}
Problem courtesy of: user3231901

Solution

I just assumed your requirement from the website you provided,i think this is what you need

DEMO

.shadow-effect {
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px                 rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow-effect:before, .shadow-effect:after {
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
    box-shadow:0 0 10px rgba(0,0,0,0.8);
    top:20%;
    bottom:0;
    left:50px;
    right:50px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}


.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:100px;
    background:#FFF;
    margin:40px auto;
}


.effect6
{
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
Solution courtesy of: Sajad Karuthedath

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.