box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Бесплатный онлайн-генератор тени CSS — визуальный конструктор теней

Создавайте красивые тени CSS визуально с прямым предварительным просмотром. Этот бесплатный генератор теней поддерживает несколько слоев, предустановки, внутренние тени и мгновенно генерирует готовый CSS-код.

Что такое генератор теней?

Генератор теней — это визуальный инструмент, который помогает веб-дизайнерам и разработчикам создавать значения CSS box-shadow, не вручную записывая числовые значения. Вместо того чтобы угадывать цифры и обновлять браузер, вы регулируете слайдеры и видите результат в реальном времени.

Свойство CSS box-shadow добавляет эффекты теней вокруг рамки элемента. Это одно из самых часто используемых свойств CSS для создания глубины, уровня и визуальной иерархии в современных веб-интерфейсах.

Как использовать этот генератор теней

1. Выберите предустановку — начните с незаметной, средней или сильной тени, или начните с нуля.
2. Регулируйте слайдеры — управляйте смещением по оси X, смещением по оси Y, размытием, расширением, цветом и прозрачностью.
3. Переключите внутреннюю тень — переключайтесь между внешней и внутренней тенью.
4. Добавьте слои — стекайте несколько теней для сложных эффектов.
5. Настройте предварительный просмотр — измените цвет фона и цвет элемента, чтобы соответствовать вашему дизайну.
6. Скопируйте CSS — нажмите кнопку копирования и вставьте код в ваш стиль.

Основные функции

Функция	Преимущество
Прямой предварительный просмотр	Сразу видите изменения при регулировке слайдеров
6 предустановок	Быстрый старт с распространенными стилями теней
Несколько слоев	Стекание теней для сложных, реалистичных эффектов
Поддержка внутренних теней	Создание внутренних теней для вдавленных элементов
Выбор цвета	Полный контроль над цветом тени
Контроль прозрачности	Тонкая настройка прозрачности тени
Копирование в буфер обмена	Экспорт CSS за один клик

Понимание CSS тени

Синтаксис

Свойство CSS box-shadow следует следующему синтаксису:

box-shadow: [inset] offsetX offsetY blur spread color;

Значение	Описание	Пример
inset	(Необязательно) Делает тень внутренней	inset
offsetX	Горизонтальное смещение — положительное = право, отрицательное = лево	4px
offsetY	Вертикальное смещение — положительное = вниз, отрицательное = вверх	4px
blur	Радиус размытия — чем выше, тем мягче тень	12px
spread	Расширение размера — положительное = больше, отрицательное = меньше	0px
color	Цвет тени с альфа-прозрачностью	rgba(0,0,0,0.1)

Несколько теней

Вы можете стекать несколько теней, разделяя их запятыми:

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

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

Сравнение стилей теней

Стиль	CSS	Сценарий использования
Незаметная	0 1px 3px rgba(0,0,0,0.08)	Карточки, элементы списка
Средняя	0 4px 6px rgba(0,0,0,0.1)	Кнопки, модальные окна
Сильная	0 10px 15px rgba(0,0,0,0.15)	Диалоги, всплывающие окна
Сияние	0 0 20px rgba(59,130,246,0.4)	Состояния фокуса, призывы к действию
Внутренняя	inset 0 2px 4px rgba(0,0,0,0.1)	Вводы, ящики
Жесткая	4px 4px 0 rgba(0,0,0,0.25)	Ретро/брутальный интерфейс

Реальные примеры использования

Уровень возвышения Material Design

Material Design использует тени для указания уровней возвышения. Карты уровня 1 используют 0 1px 3px rgba(0,0,0,0.12), а диалоги уровня 4 используют 0 12px 17px rgba(0,0,0,0.14).

Эффекты наведения

Углубите тень при наведении, чтобы создать эффект "подъема":

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

Состояния фокуса

Используйте цветное сияние для доступных индикаторов фокуса:

input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }

Ньюмоморфизм

Сочетайте внутренние и внешние тени с тем же цветом, что и фон, для мягкого, выдавленного вида.

Советы для лучших теней

Совет	Объяснение
Сохраняйте размытие незаметным	Избыточное размытие выглядит ненатурально. Начните с 4–12px для большинства элементов интерфейса.
Используйте низкую прозрачность	Тени в реальной жизни не полностью непрозрачны. 5–15% прозрачности выглядят наиболее естественно.
Избегайте чрезмерного расширения	Чрезмерное расширение может вызвать визуальные артефакты.
Учитывайте контекст	Выбирайте цвета и интенсивность теней, соответствующие дизайну.

Часто задаваемые вопросы

Что такое box-shadow и drop-shadow?

box-shadow применяется к прямоугольным элементам, создавая тени вокруг их границ. drop-shadow используется для создания теней на произвольных формах, например, для текста или изображений.

Какие браузеры поддерживают box-shadow?

box-shadow поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari, Edge и Opera. Для обратной совместимости с устаревшими версиями можно использовать префиксы -webkit- и -moz-.

Можно ли использовать box-shadow с filter: drop-shadow?

Да, но это может вызвать проблемы с производительностью, особенно на мобильных устройствах. Лучше использовать один из методов в зависимости от сценария.

Как управлять прозрачностью тени?

Прозрачность тени регулируется с помощью значения opacity в функции rgba(). Например, rgba(0,0,0,0.5) создает тень с 50% прозрачностью.

Можно ли создать тень с внутренним радиусом?

Да, это можно сделать с помощью inset и border-radius. Например:

.box {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  border-radius: 10px;
}

Как создать тень с размытием и расширением?

Используйте параметры blur и spread в синтаксисе box-shadow. Например:

.box {
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
}