CSS Asymmetric Shadow

Question

How to create a shadow like this? Only in the lower corners and gradient.

Answer 1

Use your CSS as shown below.

HTML

<div class="box mybox"> <h3>My Box</h3> </div> 

CSS

 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * MyBox * ===============================================*/ .MyBox { position: relative; } .MyBox:before, .MyBox:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 15px 10px #777; transform: rotate(-3deg); } .MyBox:after { transform: rotate(3deg); right: 10px; left: auto; } 

 <div class="box MyBox"> <h3>MyBox</h3> </div> 

Answer 2

Try it. It seems that you are looking.

http://codepen.io/jcorpus/pen/xbExKL

there are examples of shadows and there is what you are looking for.

HTML

 <div class="wrap"> <div class="box box1 shadow1"> <h3>Shadow 1</h3> </div> </div> 

CSS

  body{ background:#E6EEF6; } .wrap{ margin-left:20px; } .box{ width:40%; height:200px; float:left; background-color:white; margin:25px 15px; border-radius:5px; } .box h3{ font-family: 'Didact Gothic', sans-serif; font-weight:normal; text-align:center; padding-top:60px; color:#fff; } .box1{ background-color: #EBA39E; } .shadow1{ position:relative; } .shadow1{ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; } /*****************************************************************dashed border ****************************************************************/ .shadow1 h3{ width:87%; height:100px; margin-left:6%; border:2px dashed #F7EEEE; border-radius:5px; } .shadow1:before, .shadow1:after{ position:absolute; content:""; bottom:12px;left:15px;top:80%; width:45%; background:#9B7468; z-index:-1; -webkit-box-shadow: 0 20px 15px #9B7468; -moz-box-shadow: 0 20px 15px #9B7468; box-shadow: 0 20px 15px #9B7468; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); transform: rotate(-6deg); } .shadow1:after{ -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); transform: rotate(6deg); right: 15px;left: auto; } 

Answer 3

 <div class="box effect3"> <h3>Effect 2</h3> </div> .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } .effect3 { position: relative; } .effect3:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); }