Bcorrections
⚙️ РазработкаCSS

Генератор CSS box-shadow онлайн

Настраивайте тень в реальном времени и копируйте готовое CSS-правило. Можно добавить несколько теней на один элемент — как в Material Design или Neumorphism.

Предварительный просмотр
X смещение0px
Y смещение4px
Размытие20px
Расширение0px
Прозрачность12%
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.12);

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

Как добавить несколько теней?

В CSS можно указать несколько теней через запятую: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.06). Генератор позволяет добавить до 4 теней и комбинировать их в нужном порядке.

Что такое inset тень?

Ключевое слово inset делает тень внутренней — она отображается внутри элемента, а не снаружи. Полезно для эффекта вдавленности или внутреннего свечения.

Как тень влияет на производительность?

box-shadow — один из самых затратных CSS-эффектов. Большое размытие (blur) на многих элементах может снизить FPS. Для анимированных элементов лучше использовать filter: drop-shadow() — он аппаратно ускорен.

Нужен полноценный SEO-аудит?

Инструменты помогают с точечными задачами. Для системного роста — запросите бесплатный разбор вашего сайта.

Подробнее об услуге →