Как пользоваться

Четыре шага: вставить, запустить, проверить, скопировать. Всё в браузере.

Вставьте данные

Добавьте CSS, HTML, JSON или другой текст. Ничего не загружается на сервер.

Запустите инструмент

Нажмите «Конвертировать» или «Запустить». Результат появится сразу.

Проверьте результат

Просмотрите код и заметки перед использованием.

Скопируйте и вставьте

Скопируйте вывод и вставьте его в проект.

Об этом инструменте

Здесь настраиваются смещения по X и Y, размытие, растяжение и цвет тени, при необходимости с inset, а затем результат экспортируется как свойство box-shadow или произвольный класс shadow-[…] в Tailwind.

Пример

Начальные значения соответствуют карточке, приподнятой над тёмным фоном.

Ввод

0 8px 24px 0 rgba(0,0,0,0.2)

Вывод

box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);

Совет

Мягкие интерфейсные тени редко попадают в стандартную шкалу, поэтому произвольные значения сохраняют нужный вид.