Можно ли создать эту тень только с помощью простого CSS3?

Question

У наших дизайнеров есть фетиш на причудливые тени, подобные этим, но я хочу избежать использования спрайтов изображений. Вместо этого я хотел бы создать это только с помощью css3. Однако немного сложно воспроизвести его с точностью до пикселя только с помощью css3:

Это самое близкое, что я мог получить, но я не очень доволен результатом, потому что мне не нужна дополнительная html-обертка для .box, а также эффект затухания слева выглядит неправильно:

Моя попытка кода:

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);
}

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

Есть ли какой-нибудь гуру css, который может создать точную копию этой тени без какой-либо дополнительной разметки, кроме <div class="box">content</div>?

_{Свободный перевод вопроса Is it possible to create this drop shadow just with plain CSS3? от участника @Timo Ernst.}

Answer 1

Что ж, пиксельная точность — это жесткое требование.

Но я могу показать вам путь и подогнать его совсем близко. Я использую псевдоэлемент с двумя радиальными градиентами и вращением.

Вы можете поиграть с относительными положениями градиентов, цветов и остановок, чтобы точно настроить их.

#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>

_{Свободный перевод ответа от участника @vals.}

Answer 2

+- похожий вариант, с использованием псевдоэлемента, linear-gradient и blur() на нём.

body {
  background: #edefed;
}

.box-shadow {
  display: block;
  width: 350px;
  height: 100px;
  background: #fff;
  position: relative;
  margin-bottom: 20px;
}

.box-shadow::before {
  content: '';
  display: block;
  width: 90%;
  height: 20px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.45), rgba(0,0,0,0));
  filter: blur(3px);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-4deg);
  z-index: -1;
}

<div class="box-shadow"></div>

БЛОГ НА HUSL

Можно ли создать эту тень только с помощью простого CSS3?

Ответы (2 шт):