Как сделать данную тень?

Question

[towncitybr]

https://jsfiddle.net/56d739j4/

внутри может быть любой контент

ниже тень


а вот что в фигме

Comments

[towncitybr]

Vitaliy Grabchak, так вы вроде один вариант показываете
а как сверху добавить?
https://jsfiddle.net/qb4u86fa/

[Ankhena]

towncitybr, так точно такую же, но вверх, я же вам это полдня назад написала
https://jsfiddle.net/pLub0chg/

[towncitybr]

Ankhena, спасибо. Но все-равно верхняя вроде не совсем так (ниже скрин макета)
. inset пробовал
не помогает, может не так пробовал

[Ankhena]

towncitybr, возможно и так.
Я не вижу ваш макет полностью.
Подбирайте параметры, чтобы было похоже на макет.

[towncitybr]

Ankhena, оставил один блок
https://www.figma.com/file/8Qzpef3FvIodGcCTdPDFq7/...
добавлял inset не помогло

[Ankhena]

towncitybr, так верхняя это просто градиент, возьмите и сделайте аналогично.

Answer 1

[Ankhena]

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

box-shadow: 0px 20px 20px -20px rgba(0, 0, 0, 0.7);

Вторую тень симметрично вверх.
Только сами тени (цвет, размытие) подкорректируйте, чтобы цвет был похож.

Comments

[Ankhena]

towncitybr получилось с градиентом?

Answer 2

[BoGur]

Даю лайфхак)) Вводишь в Гугле CSS Box Shadow Generator. Заходишь на сайт и делаешь свою тень. Потом копируешь и вствляешь к себе.