Как реализовать такую тень при помощи градиента

Question

Это box-shadow, наложенный на градиент или градиент в чистом виде? Как его реализовать?

Answer 1

Псевдоэлемент с линейным градиентом и размытием решает задачу. Главное, задать наклон градиенту.

.block {
  position: relative;
  margin: 30px auto;
  height: 370px; width: 580px;
  border-radius: 15px;
  background-color: #fcfcfc;
}

.block::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%; z-index: -1;
  transform: translate(-50%, -50%);
  height: 100%; width: 100%;
  padding: 20px;
  border-radius: 30px;
  background-image: linear-gradient(to right bottom, #f3f3f3, #bebebe);
  filter: blur(7px);
}

<div class="block"></div>

БЛОГ НА HUSL

Как реализовать такую тень при помощи градиента

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