С этим инструментом что-то не так?
О «CSS Box Shadow Generator Online»
Этот инструмент визуально собирает CSS box-shadow: слайдеры для смещения, размытия, разброса, цвета и прозрачности. Тень обновляется в реальном времени, по нажатию копируется CSS.
Тени добавляют глубину, отделяют элементы от фона и подчёркивают интерактивность (hover, press, focus). Многослойные тени имитируют сложное освещение — Material elevation, неоморфизм.
Удобно для карточек, модалок, поповеров, кнопок и любых UI-элементов, которым нужна «подъём». Можно вывести классический box-shadow, многослойные тени или современные комбинации offset/blur.
Как пользоваться этим инструментом
Как собрать CSS-объявление box-shadow
Смещения
"X offset (px)" и "Y offset (px)" двигают тень по горизонтали (+ — вправо) и вертикали (+ — вниз). По умолчанию в CSS — без смещения; для карточек обычно Y ~ `4`, X близок к 0.
Размытие и цвет
"Blur (px)" регулирует мягкость — 0 даёт жёсткие края, 10+ — туман. "Color" — любой CSS-цвет, включая rgba/hex с alpha. Для деликатных UI-теней — `rgba(0,0,0,0.15)` и умеренный blur.
Запуск
Результат — единственное поле `css`: `<x>px <y>px <blur>px <color>`. Вставьте как значение `box-shadow:`. spread и inset не выводятся; синтаксис их допускает, но инструмент держится 4-арг формы.
Множественные тени
Реальные дизайны часто складывают 2–3 тени через запятую (длинная мягкая + короткая плотная) для глубины. Сгенерируйте каждую этой утилитой и соберите через запятую в одно `box-shadow:`.