Как тень делает интерфейс объёмнее
Лёгкая мягкая тень — один из самых простых способов визуально приподнять карточку, кнопку или модальное окно над фоном, придав плоскому интерфейсу ощущение глубины. Слишком резкая или тёмная тень, наоборот, выглядит грубо — золотое правило: чем больше размытие и меньше непрозрачность, тем естественнее эффект.
Совмещение нескольких теней (одна ближе и контрастнее, другая — дальше и мягче) — приём, которым пользуются в дизайн-системах вроде Material Design для реалистичного объёма. В CSS можно перечислить несколько box-shadow через запятую, взяв за основу код, скопированный отсюда.
Цвет тени не обязательно должен быть чёрным — мягкая цветная тень в тон бренда часто смотрится дизайнерски интереснее; подобрать точный оттенок поможет конвертер цветов. Тень отлично сочетается с градиентным фоном — попробуйте применить оба инструмента к одной карточке.