Чекліст
Чекліст тіней
Два шари: підйом + контакт
- Шар 1: більший спред і менша прозорість для підйому.
- Шар 2: щільніший спред для контакту.
- Уникайте великого blur для гострих компонентів.
Чіткі мульти-тіні для UI
Шаровані зсуви без розмиття, щоб зберегти чіткість.
Демо
Шарована тінь
Глибина без розмиття
box-shadow:
0 14px 34px rgba(15,23,42,0.25),
0 6px 14px rgba(15,23,42,0.16);Патерни
Де застосувати
Кнопки, картки, «плаваючі» чіпи
Кнопка primary
Підйом на hover + inset підсвітка
box-shadow:
0 10px 20px rgba(79,70,229,0.25),
inset 0 0 0 1px rgba(255,255,255,0.12);Плаваючий чіп
Два шари, без blur
box-shadow:
0 16px 30px rgba(0,0,0,0.18),
0 6px 14px rgba(0,0,0,0.22);