Генератор теней CSS
CSS-тени с живым превью
Как использовать Генератор теней CSS
CSS-тени с живым превью Бесплатный онлайн-инструмент, без регистрации, без навязчивой рекламы. Используйте прямо сейчас.
Где применяется CSS-тень?
Тени добавляют глубину, высоту и визуальную иерархию интерфейсу. Material Design от Google, Human Interface Guidelines Apple и большинство современных дизайн-систем системно используют тени для передачи того, какие элементы «ближе» к пользователю — создавая ощущение трёхмерности в плоских интерфейсах.
- Высота карточек: Тонкая тень на карточках приподнимает их над фоном, показывая интерактивность. Более глубокая тень указывает на большую высоту — как в Floating Action Button от Material Design.
- Тени для модалей и dropdown-меню: Оверлеи используют сильные тени, чтобы показать, что они «висят» над контентом страницы — создаётся чёткая визуальная иерархия глубины.
- Индикаторы фокуса: box-shadow может заменить outline для состояния фокуса:
box-shadow: 0 0 0 3px rgba(0,112,243,0.4)создаёт видимое кольцо фокуса без влияния на layout. - Читаемость текста: Тонкая text-shadow на белом тексте поверх изображения обеспечивает читаемость независимо от содержания фонового изображения — без непрозрачных цветовых оверлеев.
- Neumorphism: Neumorphic дизайн использует две тени (светлую с одной стороны, тёмную с другой) для создания 3D-эффекта, будто элемент выдавлен из или вдавлен в фон.
Синтаксис box-shadow: box-shadow: [inset] offset-x offset-y blur spread color. Можно накладывать несколько теней: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — техника многослойных естественных теней из Material Design.
Чем отличается box-shadow от drop-shadow()?
box-shadow применяется к прямоугольному боксу элемента. Он не следует за нестандартными формами — например, PNG с прозрачным фоном. CSS-фильтр drop-shadow() следует за фактически отрисованной формой, включая прозрачные области. Используйте drop-shadow() для иконок и изображений с прозрачностью; box-shadow — для карточек, кнопок и прямоугольных элементов.
Что делает ключевое слово inset?
inset делает тень внутренней — она исходит изнутри элемента, а не снаружи. Внутренняя тень создаёт эффект вдавленного или утопленного элемента — полезно для нажатых кнопок, input-полей (эффект глубины) и neumorphic UI.
Что такое spread radius в box-shadow?
Четвёртое значение — радиус распространения. Увеличивает или уменьшает тень. Положительное значение делает тень больше элемента; отрицательное — меньше. При offset-x=0 и offset-y=0 с положительным spread получается равномерный контур/глоу вокруг элемента.
Почему тень выглядит по-разному в Safari и Chrome?
Различия в рендеринге теней между браузерами обычно связаны с субпиксельным рендерингом и гамма-коррекцией. Safari и Chrome используют немного разные алгоритмы композитинга. Для консистентных результатов используйте цвета RGBA с явными значениями альфа-канала и тестируйте в обоих.
Сколько теней можно наложить?
Строгого ограничения нет. Несколько box-shadow можно наложить через запятую. Несколько теней с разными blur и opacity создают более естественный вид, имитируя реальное освещение. Material Design определяет конкретные многослойные рецепты теней для каждого уровня высоты.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow — добавляет тень снаружи (или inset внутри) без влияния на layout. outline — рисует линию за пределами border; часто для индикатора фокуса. border — добавляет линию внутри элемента, влияя на layout. filter: drop-shadow() — следует за фактически отрисованной формой. Для высоты UI — box-shadow; для кольца фокуса — outline или box-shadow; для теней иконок — drop-shadow().