Генератор CSS box-shadow — бесплатно
Визуальный конструктор CSS box-shadow с предпросмотром, многослойным наложением, выбором цвета, переключателем inset и копированием одним нажатием. Включает пресеты Material, неоморфизм и свечение.
Перетащите поле, чтобы расположить тень активного слоя — удерживайте Shift для точной настройки
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Пресеты
Частые применения
- Тени пользовательского интерфейса картыСоздавайте элегантные тени карт для информационных панелей, сеток товаров и приборных панелей.
- Эффекты нажатия кнопкиСоздавайте тени кнопок, которые имитируют глубину и состояния нажатия в реальном мире.
- Мягкий пользовательский интерфейс нейоморфизмаСоздавайте мягкий UI внешний вид нейоморфизма с парными светлыми и темными тенями.
- Тени модальных окон и всплывающих оконСоздавайте приподнятое плавающее ощущение для диалогов и раскрывающихся меню.
- Эффекты свечения и фокусное кольцоСоздавайте светящиеся эффекты, фокусные кольца и неоновые подсветки.
Как это работает
Генератор box-shadow — это полностью клиентский инструмент React — без сервера, без библиотеки. Он поддерживает список объектов слоёв тени в состоянии, собирает валидные строки CSS box-shadow при каждом изменении с использованием написанного вручную форматтера rgba(), и применяет их напрямую к элементу предпросмотра через проп style React, так что собственный движок рендеринга браузера мгновенно рисует результат.
- 1Параметры слоя питают форматтерКаждый слой тени хранит смещения x/y, размытие, распространение, цвет hex и значение непрозрачности. При каждом изменении небольшая функция shadowToCss преобразует hex-цвет в компоненты RGB с помощью регулярного выражения, затем собирает строку rgba() — например, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Несколько слоёв объединяются запятыми.
- 2Браузер рендерит живой предпросмотрСобранная строка присваивается свойству стиля boxShadow элемента div прямо в JSX. React обновляет атрибут DOM, и движок CSS браузера немедленно рисует тень — не задействован ни холст, ни WebGL, только нативный рендеринг CSS.
- 3Позиционирование перетаскиванием использует Pointer Events APIНажатие и перетаскивание окна предпросмотра вызывает setPointerCapture на элементе, затем отслеживает дельты onPointerMove для обновления смещений x и y активного слоя в реальном времени. Удержание Shift применяет коэффициент масштабирования 0,25x для точного позиционирования.
- 4Вывод копируется в буфер обменаИнструмент производит два формата вывода из одних и тех же данных слоя: стандартную декларацию CSS box-shadow и класс Tailwind с произвольным значением (shadow-[...]), где пробелы заменяются подчёркиваниями согласно синтаксическим правилам Tailwind. Копирование в один клик использует navigator.clipboard.writeText.
Похожие инструменты
Генератор CSS border-radius
Визуально проектируйте скруглённые углы с независимым управлением каждым углом. Поддерживает синтаксис X/Y для эллипса и органичных форм.
Генератор CSS Grid
Визуально спроектируйте CSS grid — дорожки, единицы и промежутки — и скопируйте сгенерированный CSS и HTML.
Генератор CSS Flexbox
Экспериментируйте с направлением, переносом, выравниванием на живых элементах — и копируйте CSS.