Генератор Box Shadow
Накладывайте до 6 слоёв тени, настраивайте каждый независимо и копируйте чистый CSS или Tailwind код в один клик.
Как использовать генератор Box Shadow
- Нажмите «Добавить слой», чтобы наложить до 6 теней — выберите любой слой в списке для редактирования.
- Настройте смещение X/Y для перемещения тени, затем размытие для мягкости и растяжение для размера.
- Выберите цвет и непрозрачность тени; включите «Внутренняя тень» для эффектов внутренней глубины.
- Стилизуйте демо-блок (цвет, фон, радиус углов) под ваш реальный компонент.
- Скопируйте результат из вкладки CSS или переключитесь на вкладку Tailwind для utility-класса.
Об этом генераторе Box Shadow
CSS-свойство box-shadow принимает список теней через запятую, каждая с горизонтальным и вертикальным смещением, радиусом размытия, радиусом растяжения, цветом и необязательным ключевым словом inset. Писать многослойные тени вручную утомительно: крошечное изменение одного значения может кардинально изменить результат. Этот генератор даёт каждому слою собственные элементы управления и показывает комбинированный эффект в реальном времени.
Используйте пресеты как отправные точки — от тонких «Мягких» возвышений до слоистой глубины в стиле Material, жёстких ретро-теней «Край» и светящихся «Неоновых» эффектов. Отрицательные значения растяжения отлично подходят для естественных, фотореалистичных теней. Сгенерированный CSS работает во всех современных браузерах, а вывод Tailwind использует синтаксис произвольных значений, совместимый с Tailwind CSS v3+.
FAQ по Box Shadow
Как создать многослойный box-shadow?
Нажмите «Добавить слой», чтобы наложить тени. У каждого слоя собственные смещение, размытие, растяжение, цвет, непрозрачность и настройка inset. Вывод CSS автоматически объединяет все слои запятыми, а кнопки со стрелками меняют порядок слоёв — первый слой рисуется сверху.
Что делает значение растяжения (spread) в box-shadow?
Растяжение расширяет (положительное) или сжимает (отрицательное) тень до размытия. Положительное растяжение делает тень больше элемента — полезно для рамок и неонового свечения. Отрицательное растяжение втягивает тень внутрь, что в сочетании с большим размытием создаёт мягкую, естественную глубину.
Как сделать внутреннюю тень (inset)?
Включите переключатель «Внутренняя тень» на любом слое. Inset-тени рисуются внутри элемента, создавая эффекты вдавленности или тиснения. Можно даже смешивать inset и обычные слои в одном объявлении box-shadow.
Действителен ли сгенерированный Tailwind-класс?
Да. Вывод Tailwind использует синтаксис произвольных значений вида shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)], который поддерживается Tailwind CSS v3 и новее (включая движок v4) без конфигурации.
Почему моя тень выглядит иначе на моей странице?
На тени влияют размер элемента, border-radius и фон позади. Подгоните цвет демо-блока, радиус углов и фон под ваш реальный компонент для точного предпросмотра.