Генератор теней CSS
Настройте тень ползунками и скопируйте CSS.
Блок и фон
Работает в браузере. То, что вы вводите, никуда не отправляется.
- До 8 слоёв
- Внутренние тени
- 6 готовых вариантов
Как создать тень box-shadow в CSS
- Начните с готового варианта или подвиньте ползунки смещения, размытия и растяжения.
- Добавьте слои для более мягкой и естественной тени.
- Скопируйте строку box-shadow в свой CSS.
Что означает каждое значение box-shadow
| Значение | Что означает | Типичный диапазон |
|---|---|---|
| Смещение X | Двигает тень вправо, или влево при отрицательном значении | от -100 до 100px |
| Смещение Y | Двигает тень вниз, или вверх при отрицательном значении | от -100 до 100px |
| Размытие | Смягчает край; 0 даёт тень с резким краем | от 0 до 200px |
| Растяжение | Увеличивает или уменьшает тень перед размытием | от -100 до 100px |
| Непрозрачность | Насколько плотным выглядит цвет тени | 10-30% для естественного вида |
Начальные значения для частых видов
| Вариант | Смещение Y | Размытие | Растяжение | Непрозрачность |
|---|---|---|---|---|
| Мягкая | 10px | 30px | -5px | 20% |
| Резкая | 6px (тоже X) | 0px | 0px | 100% |
| Свечение | 0px | 24px | 4px | 55% |
| Внутренняя | 2px | 6px | 0px | 25% |
Слоистая и Парящая строятся поверх этих значений, накладывая сразу две-три тени, чего не может воспроизвести один слой.
Советы для естественных теней
- Настоящий свет редко даёт чисто чёрную тень. Используйте непрозрачность 10-30% и склоняйте цвет к оттенку фона для более мягкого результата.
- Наложите 2-3 тени: маленькую, плотную рядом с блоком и большую, более размытую подальше, именно так устроены варианты Слоистая и Парящая.
- Отрицательное растяжение с большим вертикальным смещением создаёт эффект парящей карточки, частый в современных интерфейсах.
- Родитель с overflow: hidden обрезает тень точно так же, как обрезает контент, поэтому добавляйте отступ родителю, а не убирайте overflow повсюду.
Частые вопросы о Генератор теней
Что означают значения box-shadow?
По порядку: смещение по горизонтали, смещение по вертикали, радиус размытия, радиус растяжения и цвет. Положительные смещения двигают тень вправо и вниз, а ключевое слово inset рисует тень внутри блока.
Как сделать тень естественной?
Наложите две-три мягкие тени с низкой непрозрачностью: маленькую, плотную рядом с блоком и большую, более размытую подальше. Настоящие тени редко бывают чисто чёрными на полную силу.
Что делает растяжение?
Растяжение увеличивает или уменьшает тень перед размытием. Отрицательное растяжение с большим вертикальным смещением создаёт эффект парящей карточки.
Почему моя тень обрезается?
Родительский элемент с overflow: hidden обрезает всё, что рисуется за пределами его блока, включая тени. Добавьте отступ родителю или уберите настройку overflow.
Сколько слоёв тени можно наложить?
До 8 на этой странице. У самого CSS нет фиксированного лимита на слои box-shadow, но больше 3-4 слоёв редко выглядит иначе и дороже обходится при отрисовке.
Тень box-shadow меняет размер или отступы элемента?
Нет. box-shadow чисто визуальный и никогда не влияет на разметку, в отличие от border или outline, поэтому соседние элементы никогда не сдвигаются, когда вы добавляете или меняете размер тени.