Генератор тени box-shadow
Создаёт box-shadow.
Об этом инструменте
Здесь настраиваются смещения по 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);Совет
Мягкие интерфейсные тени редко попадают в стандартную шкалу, поэтому произвольные значения сохраняют нужный вид.
Полезно знать
Можно ли наложить несколько теней?
Генератор создаёт один слой тени за раз. Объедините слои, перечислив значения через запятую в своём CSS.
Как формируется класс Tailwind?
Пробелы внутри shadow-[…] превращаются в подчёркивания — так Tailwind читает произвольные значения. Пробелы в цветах rgba() удаляются, как это уже делает инструмент.