CSS3 : Box shadow just like in the image - html

Question

I have an image. I want to have the box shadow just like in the image.
I have tried below code.
.main_div{
height:260px;
width:300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 3px 8px rgb(67, 176, 238);
}
<div class="main_div"></div>
I don't want box-shadow to top.
Any help would be great.
Thank You.

Answer 1

You could add multiple box-shadow, as you don't want that at top so you could style each side as below,
Syntax for box-shadow,
box-shadow:offset-x | offset-y | blur-radius | spread-radius | color
.main_div {
height: 260px;
width: 300px;
margin: 50px;
box-shadow: 0px 12px 10px -5px rgba(67, 176, 238, 1), 10px 12px 10px -5px rgba(67, 176, 238, 1), -10px 12px 10px -5px rgba(67, 176, 238, 1);
}
<div class="main_div"></div>

Answer 2

try this; hope it works for you;
.main_div {
height: 260px;
width: 300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 6px 30px rgb(67, 176, 238);
}

Answer 3

you can try
.main_div{
height:260px;
width:300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 3px 6px rgba(32, 79, 182);
}

Answer 4

I hope this is what you are looking for. You can change opacity to your liking
.main-main{
height: 500px;
width: 500px;
background-color: #bcc0c6;
}
.main_div{
background-color: white;
height:260px;
width:300px;
-webkit-box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
-moz-box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
}
<br />
<div class="main-main">
<div class="main_div"></div>
</div>

Answer 5

I have used your image (displayed at the top) and I also wrapped your div in order to set a background color similar to yours. I think the result (displayed at the bottom) is quite close to the provided image:
.main_div_wrap {
background-color:#eff2f4;
width: 350px;
padding: 25px;
}
.main_div {
background-color:#ffffff;
height: 260px;
width: 350px;
-moz-box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
-webkit-box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
}
What about this?
<img src="https://i.stack.imgur.com/hbltS.png" />
<div class="main_div_wrap">
<div class="main_div"></div>
</div>