Box outer shadow combine with white shadow - html

Question

I want to create a page like in image
Problem:
Main box Shadow not coming as in image.
I have tried with my own HTMl and CSS code.
Here is fiddle
http://jsfiddle.net/EE6hU/
HTML
<div class='wrapper' id='id_wrapper'>
<div class='main'> <span class='online_survey'>Online Survey</span>
<div class='login_box'>
<div class='login'>
<form>
<div class='label'>username</div>
<input type='text' name='username' class='loginInput' placeholder='moderator' />
<div style='clear:both'></div>
<div class='label'>password</div>
<input type='password' name='password' class='loginInput' placeholder='*********' />
<div style="clear:both"></div>
<input type='checkbox' name='remember' class='check' />
<div class='remember'>Remember me</div>
<input type='submit' name='submit' class='submit_button' value='submit' />
</form>
</div>
<div class='forget_pass'><a href='#'>Forget Password</a>
</div>
</div>
</div>
</div>
CSS
.wrapper {
background:#313131;
height:645px;
}
.main {
margin: 0 auto;
position: relative;
top: 20%;
width: 500px;
}
.online_survey {
bottom: 10px;
color: #FFFFFF;
font-size: 20px;
margin-left: 15px;
position: relative;
}
.user_name {
}
.login_box {
background: none repeat scroll 0 0 #7D7D7D;
border: 1px solid #98B2C9;
border-radius: 20px;
padding: 8px;
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
}
.loginInput {
background:#313131;
border-radius: 5px;
float: left;
height: 30px;
width: 200px;
margin: 5px;
padding:5px;
color:#ffffff;
}
.label {
float: left;
height: 30px;
width: 140px;
}
.login {
padding: 30px;
}
.forget_pass a {
color: white;
text-decoration:none;
}
.submit_button {
}
.check {
float: left;
margin-left: 140px;
margin-right: 5px;
}
ge.

Answer 1

Stacking shadows of various sizes might get you close.
http://jsfiddle.net/isherwood/EE6hU/1
.login_box {
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75),
0 0 150px rgba(255,255,255,0.5),
0 0 250px rgba(255,255,255,0.5);
}
I may have to eat my own words. Here's a way to get the narrower white shadow in your image:
http://jsfiddle.net/isherwood/EE6hU/4
.login_box {
...
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
margin: 0 -150px;
}
.login_box_shadow {
overflow: visible;
border-radius: 20px;
box-shadow: 0 0 150px rgba(255, 255, 255, 0.5),
0 0 250px rgba(255, 255, 255, 0.5);
margin: 0 150px;
}