Box Shadow Lifted
<style> .box {
width: 200px;
height: 100px;
}
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #fff;
-webkit-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;
}
.drop-shadow:before,.drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}
.lifted {
border-radius: 4px;
}
.lifted:before,.lifted:after {
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.lifted:after {
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}