Плоские блоки одного цвета выглядят скучно. Глубину, объём и «дороговизну» интерфейсу придают эффекты: мягкие тени приподнимают карточки над фоном, градиенты делают заливку живой, фильтры приглушают или подсвечивают картинки, а модное «стеклянное» размытие фона выглядит современно и стильно. Все эти эффекты — чистый CSS, без единой картинки-заготовки. Освоив их, вы сможете превращать простой макет в привлекательный и глубокий, не прибегая к графическому редактору.

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

Что уже умеем / что добавим

Вы умеете оформлять элементы, анимировать их, хранить значения в переменных и вычислять размеры. Теперь добавим визуальные эффекты, которые создают глубину и стиль. В сквозном проекте мы сделаем эффектный градиентный главный экран сайта компании и «стеклянную» шапку, которая мягко размывает контент под собой.

Что вы узнаете в рамках статьи

• Как создавать мягкие тени свойством box-shadow.
• Как заливать фон градиентом через linear-gradient.
• Как обрабатывать элементы фильтрами filter.
• Как делать эффект матового стекла через backdrop-filter.

Ключевые термины

• box-shadow — тень элемента (смещение, размытие, цвет).
• linear-gradient() — линейный градиент как значение фона.
• filter — графические фильтры для самого элемента (blur, brightness и др.).
• backdrop-filter — фильтр, применяемый к фону позади элемента (эффект стекла).
• Прозрачность (rgba) — цвет с заданной непрозрачностью, нужен для мягких теней и стекла.

Мягкие тени: box-shadow

box-shadow добавляет элементу тень. В значении указывают горизонтальное и вертикальное смещение, радиус размытия и цвет. Мягкая, чуть заметная тень создаёт ощущение, что элемент приподнят над страницей:

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

Здесь тень не смещена по горизонтали (0), опущена на 4 пикселя вниз, размыта на 12 пикселей и полупрозрачна (rgba с непрозрачностью 0.12). Результат — деликатная тень снизу, будто карточка чуть парит. Секрет красивых теней — в мягкости и полупрозрачности: большой радиус размытия и низкая непрозрачность выглядят естественно, тогда как резкая тёмная тень кажется грубой. Можно задать несколько теней через запятую для более глубокого эффекта.

Градиенты: linear-gradient

Градиент — это плавный переход между цветами, и в CSS он задаётся как значение фона через функцию linear-gradient(). Указывают направление и цвета:

.hero {
  background: linear-gradient(135deg, #2d6cdf, #1e4fa3);
}

Фон плавно перетекает от одного синего к другому по диагонали (135deg — направление под углом). Градиент делает заливку живой и объёмной по сравнению с плоским цветом. Направление можно задавать углом (135deg) или словами (to right, to bottom). Цветов может быть больше двух: linear-gradient(to right, #f00, #ff0, #0f0) даст переход через несколько оттенков. Есть и радиальные градиенты (radial-gradient), расходящиеся из точки, но линейный — самый частый.

Фильтры: filter

Свойство filter применяет к элементу графические эффекты, знакомые по фоторедакторам: размытие, изменение яркости, контраста, перевод в оттенки серого. Часто их используют для изображений:

.photo {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.photo:hover {
  filter: grayscale(0);
}

По умолчанию фото будет чёрно-белым (grayscale(100%)), а при наведении плавно станет цветным — эффектный приём для галерей. Другие полезные фильтры: blur(4px) размывает, brightness(1.2) делает ярче, contrast(1.1) повышает контраст. Фильтры можно комбинировать через пробел: filter: brightness(1.1) contrast(1.05). Важно: filter применяется к самому элементу и всему его содержимому — этим он отличается от следующего эффекта.

Матовое стекло: backdrop-filter

backdrop-filter — эффектная новинка: он применяет фильтр не к самому элементу, а к тому, что находится позади него. Самое популярное применение — «матовое стекло»: полупрозрачная панель, размывающая контент под собой:

.header {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

Шапка станет полупрозрачной, а всё, что прокручивается под ней, будет мягко размыто — получится модный эффект матового стекла, как в современных операционных системах. Два условия обязательны: фон должен быть полупрозрачным (rgba с непрозрачностью меньше 1), иначе размытие под панелью просто не будет видно, и нужен сам backdrop-filter: blur(). Этот эффект особенно хорош для «прилипающих» шапок и модальных окон — контент под ними читается как сквозь запотевшее стекло.

Применяем в проекте

Придадим сайту компании глубину и стиль: сделаем главный экран с диагональным градиентом, добавим карточкам мягкие тени, а «прилипающую» шапку превратим в матовое стекло. Всё — чистым CSS.

.hero {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
}

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
}

Обновите страницу: главный экран залит красивым диагональным градиентом фирменных цветов, карточки мягко приподняты тенями, а шапка при прокрутке превращается в полупрозрачное матовое стекло, сквозь которое размыто просвечивает контент. Мы добавили глубину и современный вид, не использовав ни одной картинки — только свойства CSS. Сайт сразу стал выглядеть дороже и профессиональнее.

Частые ошибки

• Резкие тёмные тени.
  Тень без размытия и с высокой непрозрачностью выглядит грубо; используйте большой радиус и rgba с низкой непрозрачностью.
• backdrop-filter без прозрачного фона.
  Если фон панели непрозрачный, эффект стекла не виден; задавайте полупрозрачный rgba.
• Путаница filter и backdrop-filter.
  filter размывает сам элемент, backdrop-filter — фон за ним; для стекла нужен второй.
• Слишком сильные эффекты.
  Огромное размытие или кричащий градиент утомляют; эффекты хороши в меру.

Итоги

Прекрасная работа — вы освоили современные визуальные эффекты! Теперь вы умеете создавать мягкие тени через box-shadow, заливать фон градиентами с linear-gradient, обрабатывать элементы фильтрами filter и делать модное матовое стекло через backdrop-filter. В сквозном проекте сайт компании получил градиентный главный экран, приподнятые тенями карточки и стеклянную шапку — всё чистым CSS, без единой картинки.

Замечательный прогресс — ваш сайт выглядит глубоким и стильным! В следующем, заключительном уроке курса мы соберём всё воедино и сделаем полноценную тёмную тему: научимся определять предпочтения пользователя через prefers-color-scheme и переключать оформление с помощью уже знакомых переменных.