Что это такое
Box-shadow — это CSS-свойство, которое добавляет тень к HTML-элементу, делая страницу визуально объемной и глубокой. Вручную прописывать параметры тени — дело муторное: нужно помнить порядок значений, экспериментировать с размытием и смещением. Генератор box-shadow от DarkPlay превращает этот процесс в игру: вы двигаете ползунки, а код обновляется мгновенно. Никаких лишних действий — просто настраиваете внешний вид и копируете готовый CSS или класс для Tailwind.
Как пользоваться
- Откройте генератор теней в браузере — интерфейс интуитивно понятен даже новичку.
- Выберите элемент (кнопку, карточку или блок) на холсте предпросмотра.
- Настройте параметры: смещение по осям X и Y, радиус размытия, растяжение и цвет тени через палитру.
- Добавьте несколько слоев, если нужна сложная многослойная тень, — каждый слой редактируется отдельно.
- Примените один из 12 готовых пресетов для быстрого старта и доработайте его под себя.
- Переключите формат вывода: обычный CSS или Tailwind, затем скопируйте код в буфер обмена.
Кому и когда пригодится
- Веб-разработчикам и верстальщикам — для быстрого прототипирования интерфейсов без ручного подбора значений.
- Дизайнерам — чтобы показать клиенту реалистичный макет с тенями еще до передачи в разработку.
- Новичкам в CSS — как наглядный учебник: сразу видно, как каждый параметр влияет на результат.
- Контент-менеджерам — для оформления баннеров или карточек в CMS с поддержкой кастомного CSS.
- Всем, кто работает над сайтами на Tailwind — генератор сразу выдает нужный класс, экономя время на документацию.
Плюсы и ограничения
Плюсы:
- Мгновенный предпросмотр в реальном времени — не нужно перезагружать страницу.
- Поддержка множественных слоев для создания реалистичных теней, как в фотошопе.
- Готовые пресеты ускоряют работу, если нет времени на тонкую настройку.
- Экспорт сразу в двух форматах: чистый CSS и Tailwind.
- Полностью бесплатный инструмент без регистрации и водяных знаков.
Ограничения:
- Не поддерживает свойство
text-shadow— только тени блоков. - Отсутствует тонкая настройка кривой затухания (в CSS это недоступно в принципе).
- Работает только в современных браузерах с поддержкой CSS3, но это стандарт уже много лет.
Частые вопросы
Как сделать тень только снизу у блока?
Обнулите смещение по оси X (значение 0), а по оси Y задайте положительное число, например 10px. Размытие установите около 15px, а растяжение — отрицательное, скажем -5px. Так тень будет мягко стелиться под элементом, как будто он парит над поверхностью.
Можно ли скопировать тень для Tailwind?
Да, в генераторе box-shadow есть переключатель формата. Выберите «Tailwind» — и вы получите готовый класс, например shadow-custom. Останется только добавить его в конфигурационный файл проекта.
Чем отличается внешняя тень от внутренней?
Внешняя тень (по умолчанию) рисуется за пределами элемента и создает эффект приподнятости. Внутренняя добавляется через ключевое слово inset — она делает блок как бы вдавленным или вырезанным. В инструменте это переключается одной галочкой.
Почему тень не отображается в старом браузере?
Свойство box-shadow поддерживается всеми браузерами начиная с IE9 и Chrome 10. Если у пользователя совсем древний браузер, тень просто игнорируется, но на функциональность сайта это не влияет — элемент останется видимым.
Как создать эффект неонового свечения?
Выберите цвет тени яркий (например, голубой или розовый), установите растяжение в ноль, а размытие — большое, от 20px. Добавьте второй слой с меньшим размытием и более насыщенным цветом для усиления эффекта. Получится классическое неоновое свечение вокруг кнопки или карточки.