Is it possible to create this shadow with just plain CSS3?

Question

Our designers have a fetish for fancy shadows like these, but I want to avoid using image sprites. Instead, I would like to create this only with css3. This is a bit complicated, but to reproduce its pixel-perfect only with css3:

This is the closest I could get, but I'm not very happy with the result, because I do not want the additional html wrapper for .box, as well as the fading effect to the left, to look different:

Fiddle: https://jsfiddle.net/valmar/k8ugjwb2/3/

My code try:

HTML

<div class="boxwrap"> <div class="box">content</div> </div> 

CSS

 body{ background: #edefed; } .boxwrap{ width: 350px; height: 365px; position:relative; } .box{ width: 350px; height: 350px; background: #fff; } .box:after{ width: 350px; height: 50px; bottom: 26px; display: block; position:absolute; content: " "; z-index: -1; -webkit-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56); -moz-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56); box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } 

Is there any css guru that can create the perfect exact copy of this shadow without additional markup than <div class="box">content</div> ?

Answer 1

Well, the perfect pixel is a tough requirement.

Boo, I can show you the way and leave it pretty close. I use a pseudo-element with two radial gradients and rotation.

You can play with the relative positions of gradients, colors, and stops to fine tune it.

 #testback { position: absolute; top: 0px; width: 900px; height: 210px; background-color: rgb(238, 238, 238); z-index: 1; } #test { position: absolute; background: white; width: 94%; height: 50%; left: 3%; z-index: auto; } #test:after { content: ""; position: absolute; width: 81%; height: 61px; bottom: -10px; left: 1%; transform: rotate(-4deg); z-index: -1; background-image: radial-gradient(ellipse at center, rgb(82, 82, 82), rgba(255, 255, 255, 0) 60%), radial-gradient(ellipse at center, gray, rgba(255, 255, 255, 0) 70%); background-position: 14px 0px, center center; } 

 <div id="testback"> <div id="test"> </div> </div> 

Answer 2

Try Fiddle.

 .box:after{ width: 350px; height: 50px; bottom: 26px; display: block; position:absolute; content: " "; z-index: -1; box-shadow: 0px 19px 8px -5px rgba(0,0,0,0.56); }