CSS Box shadow custom shape issue

I have tried the box like in the image.

But can't get the shadow looks on bottom of the box. even i have tried in css-matic box shadow but can't get that shadow.

Can anybody give solution for shadow. thanks in advance :)

.ss_tag3 {
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(0.8);
}
.ss_tag3 h1{
  text-align:center;
  }
.ss_tag3 .ss_head {
  background: #2b557d;
  padding: 2% 7% 7%;
  position: relative;
  box-shadow: 0 3px 3px #bdc3c9;
}
.ss_tag3 .ss_head:after {
  content: '';
  border: 28px solid transparent;
  position: absolute;
  left: 41.5%;
  bottom: -42px;
  border-top: 15px solid #2b557d;
}
.ss_tag3 .ss_head h1 {
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid #20476f;
  box-shadow: 0 1px 0 #3a6998;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 7.4%;
}
.ss_tag3 .ss_head .ss_price {
  padding-top: 4%;
  padding-right: 0;
  padding-left: 0;
}
.ss_tag3 .ss_head .ss_price .ss_left-div {
  text-align: center;
}
.ss_tag3 .ss_head .ss_price .ss_left-div span {
  color: #f7f7f8;
  text-transform: capitalize;
  font-size: 33px;
  font-weight: 100;
}
.ss_tag3 .ss_list {
  background: #fff;
  padding: 14% 7% 7%;
}
.ss_tag3 .ss_list ul {
  margin-bottom: 0;
  list-style-type: none;
}
.ss_tag3 .ss_list ul li {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 5%;
  padding-top: 4%;
}
.ss_tag3 .ss_list ul li a {
  color: #406387;
  font-size: 17px;
  font-weight: 600;
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style {
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style:before {
  content: "\2713\0020";
  color: #406387;
}
.ss_tag3 .ss_list ul li a .ss_list-content {
  padding: 0;
}
.ss_tag3 .ss_list ul li a:hover {
  text-decoration: none;
}
.ss_tag3 .ss_list ul li:last-child {
  border-bottom: none;
}
.ss_tag3 .ss_list ul li:last-child a .ss_list-style:before {
  display: none;
}
.ss_tag3 .ss_foot-btn {
  text-align: center;
  background: #f5f5f5;
  padding: 5% 0;
}
.ss_tag3 .ss_foot-btn .ss_order-btn {
  text-transform: uppercase;
  background: #2b557d;
  border: 1px solid #2b557d;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 12px;
  outline: none;
}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3">
<div class="ss_head">
 <h1>groups or teams</h1>
 <div class="container-fluid ss_price">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div">
<span> special pricing</span>
 </div>
 </div>
</div>   
<div class="ss_list">
<ul>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> 
Contact Sales to ask about special pricing for accounts over 5 people.</span></a></li>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@AFrameSoftware. com</span></a></li>
</ul>
</div>
<div class="ss_foot-btn">
<button type="button" class="btn btn-primary ss_order-btn">contact now</button>
</div>
</div>

Solution

I just added these few lines of code:

.ss_tag3 {
  position:relative;       
  box-shadow:0 1px 0px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

.ss_tag3:before, .ss_tag3:after {
  content:"";
  position:absolute; 
  z-index:-1;
  box-shadow:0 0 20px rgba(0,0,0,0.4);
  top:50%;
  bottom:0;
  left:40px;
  right:40px;
  border-radius:100px / 10px;
}

The :before and :after parts are the ones that make up the shadow on the bottom. Feel free to fiddle with this one. Code snippet below.

.ss_tag3 {
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(0.8);
}
.ss_tag3 h1{
  text-align:center;
  }
.ss_tag3 .ss_head {
  background: #2b557d;
  padding: 2% 7% 7%;
  position: relative;
  box-shadow: 0 3px 3px #bdc3c9;
}
.ss_tag3 .ss_head:after {
  content: '';
  border: 28px solid transparent;
  position: absolute;
  left: 41.5%;
  bottom: -42px;
  border-top: 15px solid #2b557d;
}
.ss_tag3 .ss_head h1 {
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid #20476f;
  box-shadow: 0 1px 0 #3a6998;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 7.4%;
}
.ss_tag3 .ss_head .ss_price {
  padding-top: 4%;
  padding-right: 0;
  padding-left: 0;
}
.ss_tag3 .ss_head .ss_price .ss_left-div {
  text-align: center;
}
.ss_tag3 .ss_head .ss_price .ss_left-div span {
  color: #f7f7f8;
  text-transform: capitalize;
  font-size: 33px;
  font-weight: 100;
}
.ss_tag3 .ss_list {
  background: #fff;
  padding: 14% 7% 7%;
}
.ss_tag3 .ss_list ul {
  margin-bottom: 0;
  list-style-type: none;
}
.ss_tag3 .ss_list ul li {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 5%;
  padding-top: 4%;
}
.ss_tag3 .ss_list ul li a {
  color: #406387;
  font-size: 17px;
  font-weight: 600;
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style {
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style:before {
  content: "\2713\0020";
  color: #406387;
}
.ss_tag3 .ss_list ul li a .ss_list-content {
  padding: 0;
}
.ss_tag3 .ss_list ul li a:hover {
  text-decoration: none;
}
.ss_tag3 .ss_list ul li:last-child {
  border-bottom: none;
}
.ss_tag3 .ss_list ul li:last-child a .ss_list-style:before {
  display: none;
}
.ss_tag3 .ss_foot-btn {
  text-align: center;
  background: #f5f5f5;
  padding: 5% 0;
}
.ss_tag3 .ss_foot-btn .ss_order-btn {
  text-transform: uppercase;
  background: #2b557d;
  border: 1px solid #2b557d;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 12px;
  outline: none;
}




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

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

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3">
<div class="ss_head">
 <h1>groups or teams</h1>
 <div class="container-fluid ss_price">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div">
<span> special pricing</span>
 </div>
 </div>
</div>   
<div class="ss_list">
<ul>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> 
Contact Sales to ask about special pricing for accounts over 5 people.</span></a></li>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@AFrameSoftware. com</span></a></li>
</ul>
</div>
<div class="ss_foot-btn">
<button type="button" class="btn btn-primary ss_order-btn">contact now</button>
</div>
</div>