Генератор CSS box-shadow
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Последнее обновление: 2026 · Бесплатный онлайн-инструмент
Что такое Генератор CSS box-shadow?
Бесплатный онлайн-генератор CSS box-shadow с настройками смещения, размытия, растяжения, цвета и inset, дающий живой предпросмотр тени и готовый к копированию CSS-код box-shadow для любого элемента.
Как использовать
- 1 Выберите пресет — Быстро начните с кнопки пресета.
- 2 Настройте ползунки — Настройте тень с помощью ползунков смещения X/Y, размытия и распространения.
- 3 Предпросмотр — Проверьте результат в реальном времени в предпросмотре выше.
- 4 Скопируйте CSS — Используйте кнопку копирования для получения CSS box-shadow.
Связанные инструменты
Генератор CSS-градиентов Бесплатный визуальный генератор CSS-градиентов: создавайте линейные, радиальные и конические градиенты, настраивайте цветовые точки и угол и копируйте готовый CSS-код.
Генератор CSS border-radius Бесплатный онлайн-генератор CSS border-radius с восемью независимыми угловыми ручками и ползунками, дающий живой предпросмотр скруглённой формы и готовый к копированию CSS-код border-radius.
Генератор CSS Flexbox Бесплатная онлайн-площадка CSS Flexbox с визуальным редактором justify-content, align-items, flex-direction и wrap, показывающая живой предпросмотр макета и генерирующая готовый CSS-код Flexbox.
Часто задаваемые вопросы
Да, используйте кнопку «Добавить тень» для наложения нескольких теней.
Да, включите флажок Inset для каждой тени, чтобы создать внутреннюю тень.
Предоставляется пять пресетов: Subtle, Medium, Large, Inset и Double.
Да, вы можете ввести rgba(0,0,0,0.15) непосредственно в поле цвета.
Нет. Все вычисления выполняются в браузере.