Генератор CSS Box Shadow
Создавайте тени с несколькими слоями и получайте готовый CSS-код
Настройки тени
Предпросмотр
CSS-код
Примеры использования
Лёгкая тень для карточки
Мягкая, едва заметная тень — отлично подходит для карточек и контейнеров с контентом.
Многослойная тень
Комбинируйте несколько слоёв тени для создания насыщенного эффекта глубины.
Внутренняя тень
Создавайте внутренние тени для эффекта вдавленных или утопленных элементов.
Возможности
Несколько слоёв тени
Добавляйте и настраивайте несколько слоёв тени для создания сложных реалистичных эффектов
Предпросмотр в реальном времени
Наблюдайте за изменением тени в реальном времени при настройке смещения, размытия, распространения и цвета
Палитра цветов и пресеты
Выбирайте цвета с помощью палитры и используйте готовые пресеты для быстрого дизайна
Конфиденциальность
Всё работает в вашем браузере — данные не отправляются на сервер
Как пользоваться?
Настройте тень
Задайте смещение X/Y, размытие, распространение и цвет для каждого слоя тени. Включите inset для внутренних теней.
Добавьте слои
Нажмите «Добавить слой», чтобы создать дополнительные слои тени для более сложных эффектов.
Скопируйте CSS
Нажмите кнопку «Копировать CSS», чтобы скопировать сгенерированный код box-shadow в буфер обмена.
Часто задаваемые вопросы
Что такое генератор Box Shadow?
Генератор box shadow — это визуальный инструмент, позволяющий создавать CSS-эффекты box-shadow без написания кода вручную. Вы двигаете ползунки для смещения X/Y, размытия, распространения и цвета, а CSS обновляется в реальном времени. Считайте это площадкой для экспериментов с тенями — пробуете разные варианты, пока не получите нужный результат, а затем копируете код.
Основные возможности
Генератор поддерживает несколько слоёв тени, которые можно комбинировать для создания глубины. Каждый слой имеет собственную палитру цветов и переключатель inset. Также доступны пресеты для типичных стилей: лёгкие карточки, парящие элементы и многослойные эффекты глубины.
Распространённые сценарии
Карточки и модальные окна часто нуждаются в лёгком эффекте приподнятости. Кнопки выигрывают от небольшой тени при наведении. Внутренние тени отлично подходят для полей ввода или кнопок в нажатом состоянии. Многослойные тени придают секциям-героям премиальный объёмный вид.
Советы по созданию теней
Значение размытия лучше делать больше распространения — так тень выглядит естественнее. Используйте полупрозрачный чёрный (например, rgba(0,0,0,0.1)) вместо сплошных цветов. Накладывайте два-три слоя с разным смещением для реалистичного освещения. И помните: чем проще, тем лучше.
Конфиденциальность
Всё работает в вашем браузере. Никакие данные о тенях и настройках не покидают ваш компьютер. Только вы и ваш CSS.