Генератор CSS-теней — готовый код box-shadow

Как это работает

1. 1
   Придайте тени форму Ползунки X и Y сдвигают тень в сторону или вниз, «Размытие» смягчает край, а «Растяжение» увеличивает или сжимает тень относительно блока.
2. 2
   Задайте цвет и прозрачность Нажмите на образец цвета и убавьте прозрачность — реалистичные тени обычно чёрные с прозрачностью 10–30%, а не сплошные серые. Галочка inset рисует тень внутри блока.
3. 3
   Скопируйте CSS Строка box-shadow под превью обновляется на лету. Если нужна глубина посерьёзнее — добавьте ещё слой, затем нажмите «Копировать» и вставьте код в свою таблицу стилей.

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

Что означают четыре значения box-shadow?

По порядку: смещение по горизонтали, смещение по вертикали, радиус размытия и радиус растяжения. Например, 0px 8px 24px 0px — тень сдвинута на 8px вниз с мягким размытием 24px. Отрицательные смещения двигают тень влево или вверх, отрицательное растяжение делает её меньше блока.

Чем размытие отличается от растяжения?

Размытие смягчает край тени, не меняя её размер: чем больше значение, тем шире полоса затухания. Растяжение меняет размер самой тени до размытия: положительное увеличивает её за пределы блока, отрицательное — сжимает. Отрицательное растяжение с большим размытием — типичный рецепт аккуратной тени карточки.

Что делает inset?

Тень inset рисуется внутри элемента, а не за ним — блок будто вдавлен в страницу. Так оформляют поля ввода, углубления и нажатые кнопки. Остальные параметры — смещение, размытие, растяжение, цвет — работают так же.

Зачем складывать несколько слоёв тени?

У настоящей тени есть и тёмное плотное ядро, и широкий мягкий ореол — одной строкой box-shadow этого не получить. Маленькая полупрозрачная тень поверх большой размытой — именно так устроены уровни «высоты» в Material и Tailwind. box-shadow принимает сколько угодно слоёв через запятую.

Почему rgba(), а не сплошной цвет?

Тень со стопроцентной непрозрачностью выглядит как клякса. С rgba() тень остаётся полупрозрачной: фон за элементом просвечивает, и глаз читает это как глубину. Генератор сам собирает rgba() из выбранного цвета и ползунка прозрачности.

Влияет ли box-shadow на вёрстку и производительность?

На вёрстку — нет: размер элемента не меняется и соседи не сдвигаются. Со статичными тенями проблем с производительностью тоже нет. Единственное, чего стоит избегать, — анимировать box-shadow на больших элементах напрямую: браузер перерисовывает тень каждый кадр. Лучше анимировать opacity псевдоэлемента с тенью.

Из блога

Похожие инструменты