# Проектируйте тени CSS визуально, а не угадывайте значения
Ручная настройка box-shadow утомительна. Этот визуальный генератор позволяет накладывать несколько теней, смотреть их вживую и копировать готовый CSS. 5 Слоёв тени на элемент
Live Предпросмотр при каждом изменении
5 Быстрых пресетов
# Накладывайте несколько теней для реалистичной глубины
Реальные тени редко бывают равномерным размытием. Наложение плотной тени близко к элементу с более мягкой и широкой создаёт естественную глубину. Используйте + для добавления слоёв.# Разбор каждого параметра
| Элемент | Значение CSS | Эффект |
|---|---|---|
| Смещ. X | 1-я длина | Горизонтальное смещение. |
| Смещ. Y | 2-я длина | Вертикальное смещение. |
| Размытие | 3-я длина | Радиус размытия. |
| Размах | 4-я длина | Увеличивает или уменьшает тень. |
| Цвет и прозрач. | rgba() | Цвет тени с независимой прозрачностью. |
| Внутр. | inset | Тень внутри границы элемента. |
Используйте ненавязчивую фоновую сетку
В области предварительного просмотра видна точечная сетка, показывающая размер тени. Отрицательный spread удерживает ее ближе к элементу.Рекомендуемый рабочий процесс
Начните с пресета.
Добавьте слои для реалистичной глубины.
Используйте отрицательный spread для эффекта парящей карточки.
Скопируйте сгенерированный CSS и вставьте.