Генератор теней CSS

Настраивайте смещение, размытие, растяжение, цвет и прозрачность ползунками в реальном времени, смотрите результат на светлом или тёмном фоне и копируйте чистый CSS box-shadow — всё прямо в браузере.

Предпросмотр

Тень

Смещение по X

Смещение по Y

Размытие

Растяжение

Цвет

#0a0a0a

Прозрачность

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

Как пользоваться Генератор теней CSS

1
Задайте смещение
Ползунками смещения по X и Y сдвигайте тень влево, вправо, вверх или вниз. Положительное значение Y опускает тень под элемент, а отрицательное поднимает её над ним.
2
Придайте тени форму
Увеличивайте размытие для мягкого, рассеянного края или оставляйте его малым для чёткой тени. Растяжение увеличивает или уменьшает тень ещё до того, как применяется размытие.
3
Выберите цвет и прозрачность
Нажмите на образец, чтобы выбрать цвет тени, затем задайте прозрачность. Мягкие тёмные тени с низкой прозрачностью смотрятся наиболее естественно на светлом фоне.

4
Скопируйте CSS
Включите inset, если нужна внутренняя тень, посмотрите результат на светлой или тёмной поверхности, а затем скопируйте строку box-shadow в свою таблицу стилей.

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

Как создать тень box-shadow в CSS?

Задайте горизонтальное и вертикальное смещение, размытие и растяжение ползунками, выберите цвет и прозрачность — и CSS box-shadow сразу же сгенерируется ниже в реальном времени. Скопируйте его и вставьте на любой элемент.

Что означает каждое значение в box-shadow?

Это горизонтальное смещение, вертикальное смещение, радиус размытия и радиус растяжения, за которыми следует цвет. Смещения сдвигают тень, размытие смягчает её край, а растяжение меняет размер тени до того, как она будет размыта.

Что такое внутренняя тень (inset)?

Внутренняя тень рисуется внутри элемента, а не позади него, из-за чего поверхность выглядит вдавленной или утопленной. Переключайтесь между внешней и внутренней (inset), чтобы выбрать наружную или внутреннюю тень.

Как сделать мягкую, естественную тень?

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

Загружаются ли мои данные на сервер?

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

Генератор теней CSS

Как пользоваться Генератор теней CSS

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

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