Генератор Box Shadow

Проєктуйте тіні з живим зворотним зв'язком

Добре налаштований box-shadow може зробити інтерфейс багатошаровим, клікабельним і вишуканим. Погано налаштована тінь може зробити той самий інтерфейс брудним або непослідовним. Цей генератор дає пряме керування найважливішими значеннями: горизонтальним зміщенням, вертикальним зміщенням, розмиттям, розтягуванням, кольором, прозорістю та режимом inset. Коли ви рухаєте кожен повзунок, попередній перегляд і CSS оновлюються миттєво, тож знайти природний результат легше, ніж вводячи числа вручну.

Результат — стандартна CSS-декларація, тому вона працює для карток, модальних вікон, кнопок, випадних списків, панелей навігації та будь-яких інших елементів, що підтримують box-shadow. Жодні зображення не створюються, і нічого не завантажується. Браузер просто застосовує тінь до елемента попереднього перегляду й копіює готовий CSS, коли ви цього захочете.

Розуміємо зміщення, розмиття та розтягування

Горизонтальне та вертикальне зміщення відсувають тінь від елемента. Додатне вертикальне зміщення часто створює враження, що об'єкт піднятий над сторінкою, тоді як тінь із малим зміщенням може нагадувати сяйво. Розмиття керує м'якістю: мале розмиття створює різкий графічний край, а більше — реалістичнішу розсіяну тінь. Розтягування змінює розмір тіні до застосування розмиття. Додатне розтягування робить тінь ширшою й важчою; від'ємне стискає її, через що розмиття виглядає тонше.

Використання тіней у дизайн-системі

Тіні найефективніші, коли вони послідовні. Замість того щоб вигадувати нову тінь для кожного компонента, створіть невелику шкалу висоти: ледь помітну тінь для карток, сильнішу для спливних вікон і зосереджену для модальних. Перевіряйте тіні і на світлих, і на темних поверхнях, адже та сама прозорість може бути надто сильною на блідому тлі й надто слабкою на темному. Тіні inset корисні для натиснутих станів, заглиблених полів і втоплених панелей, але користуватися ними слід помірно, щоб елементи керування лишалися чіткими та доступними.