CSS фильтры: blur, brightness, contrast и другие эффекты

Свойство filter в CSS позволяет применять графические эффекты к элементам: размытие, изменение яркости, контраста, насыщенности, преобразование в оттенки серого или сепию. Эффекты применяются до отрисовки элемента и не требуют дополнительной разметки или изображений. Фильтры используют для стилизации картинок, hover-эффектов, создания атмосферы и доступных состояний (например, отключённая кнопка).

Для экспериментов с фильтрами используйте CSS Filter Playground на reChecker.

Все функции CSS filter

blur(radius)

Размытие по Гауссу. Единственный параметр — радиус в px или rem. 0 — без размытия.

.blur { filter: blur(5px); }

brightness(amount)

Яркость. 1 — исходная, 0 — чёрный, значения выше 1 — осветление.

.dark { filter: brightness(0.5); }
.bright { filter: brightness(1.2); }

contrast(amount)

Контраст. 1 — исходный, 0 — серый, выше 1 — усиление.

.flat { filter: contrast(0.8); }
.punchy { filter: contrast(1.3); }

saturate(amount)

Насыщенность цветов. 1 — исходная, 0 — полностью обесцвеченный, выше 1 — более насыщенные цвета.

.muted { filter: saturate(0.5); }
.vivid { filter: saturate(1.5); }
.grayscale { filter: saturate(0); }

grayscale(amount)

Оттенки серого. 0 — цветное, 1 — полностью серое.

.gray { filter: grayscale(1); }
.partial { filter: grayscale(0.5); }

sepia(amount)

Сепия (ретро-эффект). 0 — без эффекта, 1 — полная сепия.

.vintage { filter: sepia(0.8); }

hue-rotate(angle)

Смещение оттенка по цветовому кругу. Угол в deg, grad, rad, turn.

.shift { filter: hue-rotate(90deg); }

invert(amount)

Инверсия цветов. 0 — без инверсии, 1 — полная инверсия.

.inverted { filter: invert(1); }

opacity(amount)

Прозрачность. Аналог свойства opacity, но фильтр можно комбинировать с другими. 0 — невидимый, 1 — непрозрачный.

.fade { filter: opacity(0.6); }

drop-shadow(offset-x offset-y blur-radius color)

Тень по контуру элемента (включая прозрачные области). В отличие от box-shadow, повторяет форму контента — подходит для иконок, текста, SVG.

.icon { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }

Композиция фильтров

Несколько фильтров объединяются через пробел. Порядок важен — они применяются последовательно:

.vintage-photo {
  filter: sepia(0.5) contrast(1.2) brightness(0.9);
}

Сначала сепия, затем контраст, затем яркость. Разный порядок даёт разный результат.

filter vs backdrop-filter

Свойство	Область применения
filter	Сам элемент и его содержимое
backdrop-filter	Область позади элемента (фон под полупрозрачным элементом)

/* filter — размывает саму картинку */
.img { filter: blur(5px); }

/* backdrop-filter — размывает то, что под полупрозрачной панелью */
.panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

backdrop-filter не влияет на содержимое элемента, только на фон под ним. Используется для glassmorphism и overlay-эффектов.

Практические примеры

Винтажное фото

.vintage {
  filter: sepia(0.4) contrast(1.1) brightness(0.95) saturate(0.8);
}

Hover-эффект на карточке

.card {
  transition: filter 0.3s ease;
}
.card:hover {
  filter: brightness(1.05) contrast(1.02);
}

Отключённая кнопка

.button:disabled {
  filter: grayscale(0.8) opacity(0.7);
  cursor: not-allowed;
}

Тень для SVG-иконки

.icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

box-shadow на SVG не повторяет форму — drop-shadow даёт тень по контуру.

Изображение при наведении

.gallery img {
  transition: filter 0.3s ease;
}
.gallery img:hover {
  filter: saturate(1.2) brightness(1.05);
}

Тёмный overlay поверх изображения

.overlay {
  filter: brightness(0.4) contrast(1.1);
}

Выделение активного элемента

В галерее или списке карточек неактивные элементы можно приглушить, а активный — оставить насыщенным:

.gallery-item {
  filter: grayscale(0.5) opacity(0.8);
  transition: filter 0.3s ease;
}
.gallery-item.active {
  filter: none;
}

Логотип в футере

Часто логотип в подвале делают монохромным для сдержанного вида:

.footer-logo {
  filter: grayscale(1) brightness(0.9);
}

Подсветка при фокусе

Для интерактивных элементов можно слегка усилить яркость при фокусе, не меняя цвет:

input:focus {
  filter: brightness(1.02);
}

Используйте осторожно — лучше сочетать с видимым outline для доступности. Фильтры также применяются к видео и canvas — те же правила и ограничения по производительности действуют и для медиа-контента.

Производительность

Фильтры обрабатываются на уровне композитинга. Рекомендации:

• blur — самый дорогой фильтр. Большие радиусы (20px+) на больших элементах могут вызывать лаги. Ограничивайте использование на анимируемых или скроллящихся элементах.
• Комбинации — несколько фильтров увеличивают нагрузку. Избегайте избыточных цепочек.
• will-change — используйте только при анимации и снимайте после: will-change: filter.
• Анимация filter — триггерит repaint. Для простых изменений opacity или brightness обычно приемлемо; для blur на многих элементах — тестируйте.

Порядок композиции

При комбинировании фильтров результат зависит от порядка:

/* Сначала сепия, потом яркость — тёплый приглушённый тон */
.a { filter: sepia(0.5) brightness(0.9); }

/* Сначала яркость, потом сепия — другой оттенок */
.b { filter: brightness(0.9) sepia(0.5); }

Экспериментируйте в CSS Filter Playground на reChecker для подбора нужного сочетания.

url() и SVG-фильтры

Помимо встроенных функций, filter может ссылаться на SVG-фильтр через url():

.custom {
  filter: url(#myFilter);
}

В SVG определяется <filter id="myFilter"> с примитивами feGaussianBlur, feColorMatrix и др. Это даёт максимальную гибкость для сложных эффектов, но требует знания SVG-фильтров.

Поддержка браузеров

filter поддерживается во всех современных браузерах. Для старых Safari может потребоваться префикс -webkit-filter. IE9–11 поддерживают только старую версию с ограниченным синтаксисом. В 2026 году префиксы для filter обычно не требуются.

Инструмент CSS Filter Playground на reChecker

CSS Filter Playground на reChecker позволяет:

• Применять все фильтры с ползунками и числовыми значениями
• Комбинировать фильтры и видеть результат в реальном времени
• Загружать своё изображение для тестирования
• Копировать готовый CSS одной кнопкой

Удобно для подбора эффектов под дизайн и быстрого прототипирования.

Рекомендации

1. Контраст и доступность — фильтры могут снижать читаемость. Проверяйте контраст текста при использовании brightness, contrast, grayscale
2. Fallback — в старых браузерах элементы без фильтра останутся в исходном виде; убедитесь, что дизайн не ломается
3. Мобильные устройства — тестируйте blur на слабых устройствах
4. Единообразие — используйте согласованные значения фильтров по проекту (например, общий стиль для disabled-состояний). Это создаёт предсказуемый и профессиональный интерфейс.

FAQ

В чём разница между filter и backdrop-filter?

filter применяется к самому элементу и его содержимому. backdrop-filter применяется к области позади полупрозрачного элемента — к контенту под ним. backdrop-filter используется для эффектов вроде glassmorphism.

Как создать эффект винтажного фото?

Комбинация sepia(), contrast(), brightness() и saturate(): например, filter: sepia(0.4) contrast(1.1) brightness(0.95) saturate(0.8). Порядок влияет на результат. CSS Filter Playground на reChecker помогает подобрать значения визуально.

Влияют ли CSS-фильтры на производительность?

Да. blur — самый затратный. Большие радиусы на больших элементах и анимация фильтров могут вызывать лаги. Остальные фильтры (brightness, contrast, saturate и т.д.) обычно легче. Тестируйте на целевых устройствах.

Можно ли комбинировать несколько фильтров?

Да. Перечислите их через пробел: filter: blur(2px) brightness(1.1) contrast(1.05). Порядок важен — фильтры применяются последовательно. Разный порядок даёт разный визуальный результат.

Какой инструмент использовать для подбора CSS-фильтров?

CSS Filter Playground на reChecker — бесплатный онлайн-инструмент для экспериментов с filter и backdrop-filter. Поддерживает все функции, загрузку своего изображения, комбинирование фильтров и экспорт готового CSS. Подходит для дизайнеров и разработчиков.