Генератор Box Shadow CSS Онлайн
Генерируйте CSS box-shadow визуально — с предпросмотром в реальном времени.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Зачем это нужно
box-shadow без ручного написания кода
Несколько теней
Комбинируйте внешние и внутренние тени для сложных эффектов.
Без интернета
Генерация в браузере без обращения к серверу.
Предпросмотр
Тень обновляется в реальном времени при изменении параметров.
Мгновенно
Готовый CSS-код доступен сразу.
Как это работает
Три шага — никаких сложностей
Настройте параметры тени
Задайте смещение (X, Y), размытие, растяжение и цвет тени с помощью ползунков.
Добавьте несколько теней
Комбинируйте несколько теней для сложных эффектов глубины.
Скопируйте CSS-код
Скопируйте готовое CSS-свойство box-shadow и вставьте в стили.
FAQ
Остались вопросы?
Синтаксис: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. offset-x — горизонтальное смещение (отрицательное — влево), offset-y — вертикальное (отрицательное — вверх), blur-radius — радиус размытия (0 = чёткая тень), spread-radius — расширение тени, inset — тень внутри элемента.
Да. box-shadow принимает несколько значений через запятую: box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.8). Это позволяет создавать эффекты neumorphism, глубины или сложного освещения.
Используйте ключевое слово inset в начале значения: box-shadow: inset 0 2px 4px rgba(0,0,0,0.3). Внутренняя тень рисуется внутри границы элемента, создавая эффект вдавленного элемента или рельефной поверхности.
box-shadow является дешёвой операцией для GPU, если тень не анимируется. Анимация box-shadow вызывает repaint — более дорогостоящую операцию, чем transform. Для анимированных теней рекомендуется использовать opacity на псевдоэлементе ::after с предсозданной тенью.
box-shadow следует прямоугольной форме блочной модели элемента (даже если у элемента border-radius). filter: drop-shadow() следует форме реального контента, включая прозрачные области PNG-изображений. Для иконок и изображений с прозрачностью drop-shadow даёт более естественный результат.
CSS box-shadow: спецификация, производительность и современные эффекты
CSS box-shadow был введён в спецификации CSS Backgrounds and Borders Module Level 3 (W3C). До широкого распространения CSS3 тени создавались через PNG-изображения или хаки с фоновыми изображениями. С 2011–2012 годов box-shadow поддерживается без префиксов во всех основных браузерах. Свойство принимает список разделённых запятыми значений теней, рисуемых от последней к первой.
Эффект neumorphism (soft UI), ставший популярным в 2020 году, построен на комбинации двух теней: светлой (имитация подсветки) и тёмной (имитация тени) под разными углами. Формула: background: #e0e0e0; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff. Это создаёт иллюзию выдавленного из поверхности элемента.
С точки зрения доступности (accessibility) CSS-тени влияют на воспринимаемый контраст. WCAG 2.1 рекомендует достаточный контраст между текстом и фоном, а тени могут улучшить читаемость текста на сложных фонах (text-shadow) или обозначить интерактивность элементов (box-shadow при :focus для замены outline).