Генератор CSS box-shadow

Создание и копирование тени

1. Задайте для каждого слоя горизонтальное и вертикальное смещение, размытие, расширение, цвет и непрозрачность. Выберите внутреннюю тень, если она должна быть внутри блока.
2. Добавляйте, дублируйте и перемещайте слои. Оставьте от 1 до 8 слоёв; неполное или выходящее за пределы редактора значение очищает текущий код до исправления.
3. Проверьте предпросмотр в режиме «По размеру» или 100%, затем скопируйте объявление. Вставьте его в CSS-правило нужного элемента.

Как устроен слой

Положительные горизонтальное и вертикальное смещения сдвигают тень вправо и вниз. Размытие смягчает край; при нулевом размытии край остаётся резким. Расширение меняет размер, а не мягкость.

Непрозрачность относится к цвету каждой тени, а не ко всему блоку. Тень с непрозрачностью 50 процентов остаётся в коде ровно 50-процентной; её цвет не преобразуется в округлённый альфа-байт.

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

Для размеров принимаются точка или запятая и до двух знаков после запятой; для непрозрачности — один. Поля редактора ограничены и не предназначены для разбора всех допустимых выражений CSS. В созданном коде всегда используется десятичная точка.

Полезные эксперименты с тенью

Начальный пример сочетает небольшую мягкую тень со значениями 0, 2, 4, 0 пикселей и непрозрачностью 12.5 процента с более широкой тенью 0, 8, 16, -4 пикселя и непрозрачностью 20 процентов. Каждая строка соответствует одной записи в коде.

Для чёткого эффекта контура задайте внешнему слою нулевые смещения и размытие и положительное расширение. Это по-прежнему тень, а не экспортированное свойство границы.

Попробуйте внутренний слой с нулевым размытием и положительным смещением, чтобы увидеть резкий внутренний край. Измените цвет поверхности и включите режим 100%, не меняя объявление тени.

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

Редактор создаёт от 1 до 8 слоёв box-shadow в sRGB с размерами в CSS-пикселях. Он не импортирует CSS, не создаёт тени фильтром drop-shadow, не выбирает селектор и не экспортирует полную таблицу стилей или изображение.

Размер блока, непрозрачные цвета и радиус скругления в предпросмотре служат только контекстом. Геометрия и фон вашего элемента могут изменить вид того же объявления.

Режим «По размеру» масштабирует весь предпросмотр. Для подробного изучения используйте прокручиваемый режим 100%. Пространство предпросмотра ограничено и может обрезать края размытия; браузеры и дисплеи могут отрисовывать разные пиксели.

Прозрачная или схлопнувшаяся тень может быть корректной, но невидимой. Если браузер не может показать текущее объявление, инструмент сообщит об этом, не подменяя эффект; корректный код останется доступен для копирования.

Тень остаётся на странице

Редактирование тени и создание кода выполняются локально без загрузки или сохранения ваших значений. Копирование происходит только по вашему выбору. Общая политика конфиденциальности сайта продолжает действовать.