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 одной кнопкой

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

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. Подходит для дизайнеров и разработчиков.

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

Для экспериментов с фильтрами используйте 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)

.fade { filter: opacity(0.6); }

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

.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);
}

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

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

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);
}

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

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

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

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

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

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

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

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

blur(radius)

brightness(amount)

contrast(amount)

saturate(amount)

grayscale(amount)

sepia(amount)

hue-rotate(angle)

invert(amount)

opacity(amount)

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

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

filter vs backdrop-filter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

FAQ

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

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

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

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

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

Попробуйте инструменты reChecker

Термины по теме статьи

Минификация кода: что это и зачем нужна

Адаптивный дизайн: что это и как реализовать

Lazy Loading: что это и как реализовать

INP (Interaction to Next Paint): что это и как улучшить

Похожие статьи

CSS спрайты: оптимизация иконок и графики для веб-сайта

CSS clip-path: как создавать фигурные маски для элементов

Как извлечь цветовую палитру из изображения для веб-дизайна

Glassmorphism в CSS: как создать эффект матового стекла

Понравилась статья?

Содержание

Поделиться

Поделиться статьей

Популярные теги

Теги

Поддержка reChecker

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

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

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

blur(radius)

brightness(amount)

contrast(amount)

saturate(amount)

grayscale(amount)

sepia(amount)

hue-rotate(angle)

invert(amount)

opacity(amount)

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

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

filter vs backdrop-filter

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

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

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

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

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

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

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

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

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

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