Генератор CSS box-shadow
Создавайте CSS box-shadow визуально: несколько слоёв, смещение, размытие, растяжение, inset и прозрачность RGBA. Живой предпросмотр и готовый код.
Пресеты
Слои
Настройки предпросмотра
Предпросмотр
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
Похожие Инструменты
Просмотреть ВсеЧто такое Генератор CSS box-shadow?
Визуальный редактор CSS-свойства box-shadow. Можно накладывать несколько слоёв теней и для каждого задавать смещение, размытие, растяжение, цвет, прозрачность и флаг inset. Результат виден на примере блока, а инструмент тут же пишет соответствующий CSS.
Как пользоваться Генератор CSS box-shadow
- Выберите пресет (Soft, Layered, Hard, Glow, Inner, Ring) или начните с тени по умолчанию.
- Выберите слой и настройте горизонтальное и вертикальное смещение, размытие, растяжение, цвет и прозрачность тени; для внутренней тени отметьте Inset.
- Добавляйте и удаляйте слои, чтобы собрать многослойную тень; слои перечислены в порядке отрисовки.
- Меняйте фон, цвет элемента и радиус в настройках предпросмотра, чтобы оценить тень в контексте.
- Скопируйте готовый CSS-код.
Пример
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
Один слой с inset: тень рисуется внутри элемента, цвет записан в hex, так как прозрачность равна 1.
Когда использовать Генератор CSS box-shadow
Подходит для высоты карточек, колец фокуса, свечения и внутренних теней у любого HTML-элемента. Для теней текста используйте генератор text-shadow, а для теней, повторяющих форму прозрачного PNG или обрезанного элемента, берите filter: drop-shadow() (генератор CSS-фильтров): box-shadow всегда следует прямоугольной рамке элемента.
Как работает Генератор CSS box-shadow
Каждый слой превращается в одно значение box-shadow в порядке [inset] x y blur spread color. Длины записываются в px (ноль без единиц, просто 0). Ползунок прозрачности умножается на собственный альфа-канал цвета: полностью непрозрачные цвета выводятся в hex, полупрозрачные как rgba(r, g, b, a). Несколько слоёв объединяются через запятую, по одному на строку; первый слой рисуется сверху. Размытие не может быть отрицательным, растяжение может.
Распространенные Случаи Использования
- Многослойные тени в стиле Material для карточек и модальных окон
- Доступные кольца фокуса с тенью только из растяжения (0 0 0 3px)
- Внутренние тени для нажатых кнопок и полей ввода
- Цветное свечение вокруг кнопок призыва к действию
- Жёсткие смещённые тени для необрутализма
Часто Задаваемые Вопросы
В каком порядке рисуются несколько теней?
Первая тень в списке рисуется сверху, последняя снизу. Инструмент записывает слои в том порядке, в котором они показаны на панели слоёв.
Чем отличаются размытие и растяжение?
Размытие смягчает край тени (оно не может быть отрицательным). Растяжение увеличивает или уменьшает тень до размытия; отрицательное значение делает тень меньше элемента.
Нужен ли ещё -webkit-box-shadow?
Нет. Свойство box-shadow без префикса поддерживают все браузеры уже больше десяти лет, поэтому инструмент выводит только стандартное свойство.
Почему тень не появляется вокруг моего прозрачного изображения?
box-shadow повторяет прямоугольную рамку элемента (с учётом border-radius), а не видимые пиксели. Для этого используйте filter: drop-shadow().