Генератор CSS Box Shadow (с живым предпросмотром)
Шесть распространённых пресетов тени (мягкая, карточка, поднятая, свечение, неоморфная, вставленная). Тонкая настройка всех параметров ползунками, результат в реальном времени и готовый CSS для вставки.
Как это работает
Пять параметров тени
Смещение по X: горизонтальное смещение. Положительное значение сдвигает тень вправо, отрицательное — влево. Для освещения сверху слева (типичное допущение в UI) небольшое положительное X имитирует источник света сверху слева.
Смещение по Y: вертикальное смещение. Положительное значение сдвигает тень вниз, имитируя источник света сверху. Почти все UI-тени используют положительное Y.
Радиус размытия: мягкость края тени. 0 = чёткий край (редко). 8-30px типично для карточек и кнопок. Бо́льшие значения создают мечтательные, мягкие тени.
Распространение: равномерно расширяет или сжимает тень. Положительные значения делают тень крупнее элемента; отрицательные — меньше. Отрицательное распространение в сочетании со смещением создаёт эффект «поднятости».
Цвет/прозрачность: тени обычно чёрные с низкой прозрачностью (10-30%). Цветные тени модны, но сложны в исполнении. Соблюдайте диапазон яркости фона — слишком тёмные тени на тёмном UI исчезают, слишком светлые на светлом — лишены контраста.
Вставленные тени
Вставленная тень рисуется внутри элемента, а не снаружи. Применяется для: состояний нажатой кнопки, утопленных полей ввода, неоморфных эффектов «вдавленного 3D».
Вставленные тени учитывают border-radius элемента и игнорируют переполнение. Удобны для добавления визуальной глубины плоским UI-элементам без изменения реального макета.
Неоморфизм и тренд «мягкого UI»
Неоморфизм (популярный в 2020-2022 годах) использует две противоположные тени — одну светлую, одну тёмную — чтобы элементы казались выдавленными из однотонного фона. Наш пресет «Неоморфная» показывает одну тёмную тень; для полного эффекта комбинируйте со светлой вставленной тенью с противоположной стороны: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'.
Примечание: чистый неоморфизм имеет проблемы с доступностью — недостаточный контраст затрудняет различение элементов. Современный дизайн использует его экономно, часто в сочетании с традиционными тенями.
Частые вопросы
›Можно ли добавить несколько теней?
CSS поддерживает несколько теней через запятую: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)'. Инструмент генерирует одну тень за раз; комбинируйте несколько вручную.
›Как создать неоморфный эффект?
Комбинируйте тёмную тень снизу справа со светлой тенью сверху слева — обе либо вставленные, либо внешние. Пример: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)'. Наш пресет показывает тёмную половину; добавьте светлую тень вручную.
›В чём разница между размытием и распространением?
Размытие смягчает край тени (градиентная прозрачность). Распространение меняет общий размер тени (больше или меньше элемента). blur=20 spread=0 — мягкое свечение размером с элемент; blur=0 spread=20 — жёсткая тень на 20px крупнее элемента.
›Почему моя тень выглядит плоской?
Вероятно, слишком низкая прозрачность, нет смещения или цвет тени слишком близок к фону. Попробуйте Y=8, blur=24, opacity=0.18 как отправную точку — эти значения видны на большинстве светлых фонов.
›Можно ли использовать это для text-shadow?
Почти — text-shadow использует тот же синтаксис, но без «spread» и «inset». Скорректируйте вручную после копирования: возьмите 'X Y blur color' (уберите spread и inset).
›Насколько тени влияют на производительность?
Box-shadow аппаратно ускорен в современных браузерах. Много теней на многих элементах всё равно может замедлить прокрутку. Одиночные тени на карточках и кнопках — никаких проблем.
›Что лучше — тени или рамки?
Оба имеют применение. Рамки чётче и доступнее. Тени выглядят мягче/рельефнее. Современный полуплоский UI часто использует оба: тонкую рамку для чёткости + мягкую тень для ощущения объёма.
›Данные отправляются на сервер?
Нет. Все предпросмотры и генерация CSS выполняются локально в браузере.
Похожие инструменты
Обновлено: