Генератор CSS box-shadow
Генерация box-shadow с живым превью. Настройте смещение, размытие, распространение, цвет и прозрачность, затем скопируйте код.
Превью
Параметры
Смещение X (px)
Смещение Y (px)
Размытие (px)
Распространение (px)
Цвет
Прозрачность
Сгенерированный CSS
О программе
Бесплатный онлайн-генератор CSS box-shadow для фронтенд-разработчиков. Свойство CSS box-shadow добавляет элементу одну или несколько теней. Каждая тень задаётся горизонтальным смещением (offset-x), вертикальным (offset-y), радиусом размытия, распространением и цветом. Ключевое слово "inset" рисует тень внутри элемента. В этом инструменте можно настроить все параметры с помощью слайдеров и выбора цвета, посмотреть результат в реальном времени в блоке предпросмотра и скопировать сгенерированный CSS (например box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);) в таблицу стилей. Установка не требуется; всё выполняется в браузере.
Как пользоваться
1. Настройте параметры: слайдеры или поля ввода для Смещения X (горизонталь), Смещения Y (вертикаль), Размытия и Распространения. Выберите цвет тени (пипетка или HEX, напр. #000000) и прозрачность (0–1). Отметьте «Внутренняя тень» при необходимости.
2. Превью: образец выше обновляется в реальном времени. Проверьте эффект перед копированием.
3. Копирование кода: когда результат устраивает, нажмите «Копировать код», вставьте скопированный box-shadow CSS в файл CSS или инлайн-стили.