Генератор Box Shadow

Проектируйте тени с живой обратной связью

Хорошо настроенный box-shadow может сделать интерфейс многослойным, кликабельным и отполированным. Плохо настроенная тень может сделать тот же интерфейс грязным или непоследовательным. Этот генератор даёт прямой контроль над важнейшими значениями: горизонтальным смещением, вертикальным смещением, размытием, растяжением, цветом, прозрачностью и режимом inset. Когда вы двигаете каждый ползунок, предпросмотр и CSS обновляются мгновенно, поэтому найти естественный результат проще, чем вводя числа вручную.

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

Понимаем смещение, размытие и растяжение

Горизонтальное и вертикальное смещение отодвигают тень от элемента. Положительное вертикальное смещение часто создаёт впечатление, что объект приподнят над страницей, тогда как тень с небольшим смещением может напоминать свечение. Размытие управляет мягкостью: малое размытие даёт резкий графичный край, а большее — более реалистичную рассеянную тень. Растяжение меняет размер тени до применения размытия. Положительное растяжение делает тень шире и тяжелее; отрицательное сжимает её, из-за чего размытие выглядит тоньше.

Использование теней в дизайн-системе

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