CSS Shadow
Войдите или зарегистрируйтесь, чтобы сохранять инструменты в избранное
Генератор CSS box-shadow с визуальным редактором
Смещение X/Y — горизонтальное и вертикальное смещение тени в пикселях.
Размытие — радиус размытия тени. Чем больше значение, тем более размытая тень.
Распространение — увеличение или уменьшение размера тени.
Inset — делает тень внутренней (вдавленной) вместо внешней.
Можно добавить несколько теней для создания сложных эффектов.
Генератор CSS Box-Shadow онлайн — тени для элементов
Визуальный редактор CSS box-shadow с 8 готовыми пресетами, случайной генерацией, поддержкой множественных теней, inset-теней и neumorphism-эффекта. Все параметры настраиваются в реальном времени с мгновенным предпросмотром.
Синтаксис CSS box-shadow
box-shadow: offset-x offset-y blur-radius spread-radius color [inset];
| Параметр | Описание | Пример |
|---|---|---|
| offset-x | Сдвиг по горизонтали (+ вправо) | 4px |
| offset-y | Сдвиг по вертикали (+ вниз) | 4px |
| blur-radius | Радиус размытия (0 = чёткая тень) | 10px |
| spread-radius | Увеличение/уменьшение тени | -2px |
| color | Цвет тени (rgba для прозрачности) | rgba(0,0,0,0.2) |
| inset | Внутренняя тень | inset |
Готовые пресеты
- Subtle — лёгкая тень для карточек:
0 1px 3px rgba(0,0,0,0.1) - Medium — стандартная тень:
0 4px 6px -1px rgba(0,0,0,0.1) - Large — выразительная тень:
0 20px 25px -5px rgba(0,0,0,0.1) - Glow — цветное свечение:
0 0 15px rgba(59,130,246,0.6) - Neumorphism — популярный UI-тренд: светлая + тёмная тени на одном фоне
- Inset — вдавленный эффект для нажатых кнопок
Множественные тени
CSS позволяет задавать несколько теней через запятую: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.2);. Первая тень — ближняя и чёткая, вторая — дальняя и размытая. Это создаёт более реалистичный эффект глубины.
Часто задаваемые вопросы
Как сделать тень только снизу?
Используйте отрицательный spread и ограничьте размытие: box-shadow: 0 4px 6px -4px rgba(0,0,0,0.3);
Как тень влияет на производительность?
box-shadow вызывает repaint при изменении, но не reflow. На современном оборудовании тени практически не влияют на FPS. Избегайте изменения shadow в JavaScript-анимациях на слабых устройствах.
Что такое neumorphism?
UI-стиль, имитирующий физические объекты через комбинацию светлой и тёмной теней на одном фоне. Элемент выглядит как выдавленный или вдавленный из поверхности.
Для градиентов используйте CSS Gradient, для скруглений — CSS Border Radius.
Полезные статьи
WCAG контрастность: доступность цветов в веб-дизайне
Как проверить контрастность цветов по стандарту WCAG 2.1. Уровни AA и AAA, формула расчёта, рекомендации.
CSS Border Radius: скругление углов элементов
Как использовать border-radius: синтаксис, сокращённая запись, эллиптические углы. Генератор border-radius онлайн.