Генератор неоморфизма

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

Ключевое слово inset уводит тень внутрь элемента. Тот же набор из светлой и тёмной тени, перенесённый внутрь и с обратными знаками смещения, читается как вдавленность. На этом строятся нажатые состояния кнопок и поля ввода в неоморфном стиле.

Доступность. Границ у элемента нет, контраст между кнопкой и фоном близок к нулю, и человек с ослабленным зрением не отличит нажимаемое от декоративного. Требование WCAG к нетекстовым элементам интерфейса — контраст 3:1 с окружением, и чистый неоморфизм его не выполняет в принципе. Практический выход — оставить приём для декоративных карточек, а для управляющих элементов добавить рамку, иконку или цветовой акцент.

Средне-светлый серый с лёгким уходом в тёплый или холодный тон, примерно от #e0e0e0 до #eef0f4. На чистом белом светлой тени просто не остаётся места — она сливается с фоном. На тёмном фоне приём работает, но требует более контрастных теней, иначе объём пропадает.

От цвета фона: светлая тень — тот же цвет, осветлённый на заданный процент, тёмная — затемнённый на столько же. Поэтому фон и тени всегда согласованы, и не нужно подбирать оттенки вручную. Интенсивность как раз задаёт этот процент.

Как основа целого интерфейса — нет, пик пришёлся на 2020 год и прошёл ровно из-за проблем с доступностью. Отдельные приёмы остались: мягкая двойная тень на карточках и вдавленные поля ввода встречаются в дашбордах и в интерфейсах приложений для умного дома, где эстетика физического прибора уместна.

Нет, всё считается в браузере.