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