CSS Shadow: box-shadow и text-shadow в веб-дизайне
CSS-тени — один из ключевых инструментов визуального дизайна веб-интерфейсов. Они добавляют глубину и объём элементам, создают ощущение слоёв и визуальной иерархии. Свойство box-shadow используется для блочных элементов, text-shadow — для текста.
box-shadow: тень для блоков
Синтаксис: box-shadow: offsetX offsetY blur spread color;
- offsetX — смещение по горизонтали. Положительное значение — вправо, отрицательное — влево.
- offsetY — смещение по вертикали. Положительное — вниз, отрицательное — вверх.
- blur — радиус размытия. Чем больше, тем мягче тень. 0 — резкая тень.
- spread — расширение тени. Положительное значение увеличивает тень, отрицательное — уменьшает.
- color — цвет тени. Обычно используют rgba() с прозрачностью: rgba(0, 0, 0, 0.1).
- inset — ключевое слово для внутренней тени.
text-shadow: тень для текста
Синтаксис: text-shadow: offsetX offsetY blur color;
Аналогичен box-shadow, но без параметров spread и inset. Используется для выделения текста на пёстром фоне, создания эффекта свечения или рельефного текста.
Популярные стили теней
- Мягкая тень карточки:
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); - Выраженная тень кнопки:
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); - Внутренняя тень (вдавленный эффект):
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); - Цветная тень:
box-shadow: 0 4px 14px rgba(79,70,229,0.4);
Множественные тени
Через запятую можно указать несколько теней. Это позволяет создавать реалистичные эффекты глубины, когда ближняя тень резкая и тёмная, а дальняя — мягкая и светлая (Material Design elevation).
Производительность
CSS-тени — аппаратно-ускоренная операция в современных браузерах. Однако множественные тени с большим blur на десятках элементов могут влиять на производительность скролла. В таких случаях используйте тени только для видимых элементов.
Заключение
Создайте идеальную тень визуально в нашем генераторе CSS Shadow. Также попробуйте CSS Gradient и Border Radius генераторы.