Как сделать двойную тень от блока?

Question

[Cubeden_UA]

Нужно сделать такую тень как на скрине

Answer 1

[Teleweb developer]

С помощью тени вряд ли ты это сделаешь, лучше используй псевдоелементы:
<div class="div"></div>

.div {
    position: absolute;
    width: 600px;
    height: 200px;
    background: hsl(240deg 100% 50%);
    border-radius: 20px;
    top: 300px;
}
.div::before {
    width: 500px;
    height: 30px;
    background: hsl(240deg 63% 90%);
    position: absolute;
    top: -17px;
    left: 50px;
    content: "";
    z-index: -1;
    border-radius: 20px;
}

Результат:

Надеюсь это поможет)

Answer 2

[humoured]

Откройте инструменты разработчика в своём браузере и посмотрите как это сделано. Есть вероятность, что это вовсе не тень, а отдельные блоки с закруглёнными углами и прозрачностью.

Comments

[Cubeden_UA]

Так я не могу открыть, это же макет с фигми, я сам делаю сайт