Генератор тени блока CSS

Как пользоваться

1. Задайте Смещение по горизонтали и Смещение по вертикали первого слоя. Положительное смещение по вертикали сдвигает тень вниз.
2. Увеличьте Размытие, чтобы смягчить край, и Растяжение, чтобы сделать тень больше или меньше блока.
3. Выберите Цвет и Непрозрачность. Добавьте слои кнопкой Добавить слой, чтобы тень выглядела естественнее.
4. Скопируйте объявление CSS и вставьте его в правило вашего элемента.

Как строится значение

Свойство box-shadow принимает одну или несколько теней, разделённых запятыми. Каждая записывается в виде необязательного слова inset, смещений по горизонтали и вертикали, радиуса размытия, расстояния растяжения и цвета. Первая тень рисуется поверх остальных, а без теней значение — none.

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

box-shadow: [inset] смещение-x смещение-y размытие растяжение цвет, ...

Слои и что проверяет редактор

Мягкая естественная тень часто состоит из двух слоёв: маленькой и тёмной у блока и большей, светлее, дальше. Каждый слой — это одна тень в значении. Редактор допускает до 8 слоёв, смещения и растяжение от −200 до 200 пикселей, размытие от 0 до 200 пикселей и непрозрачность от 0 до 100 %.

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

Частые вопросы