filter

filter — CSS-свойство, которое применяет графические эффекты к элементу: размытие, яркость, контрастность, оттенки серого, тени и другие. Эффекты обрабатываются на GPU.

Зачем нужно

filter позволяет обрабатывать изображения и элементы прямо в CSS без Photoshop или Canvas. Это полезно для hover-эффектов, неактивных состояний, декоративных приёмов и создания единого визуального стиля.

Где используется

  • Hover-эффекты на изображениях (яркость, насыщенность)
  • Disabled/неактивные состояния (grayscale)
  • Размытие фона за элементом (через backdrop-filter)
  • Drop-shadow для элементов неправильной формы
  • Цветовая коррекция фото

Предпосылки

Функции filter

blur — размытие

.blurred {
  filter: blur(4px);      /* Размытие 4px */
}

.image:hover {
  filter: blur(0);        /* Убрать размытие при наведении */
}

brightness — яркость

.element {
  filter: brightness(0.5);  /* Затемнить (50%) */
  filter: brightness(1);    /* Нормально (100%) */
  filter: brightness(1.5);  /* Осветлить (150%) */
}

contrast — контрастность

.element {
  filter: contrast(0.5);  /* Низкий контраст */
  filter: contrast(1);    /* Нормально */
  filter: contrast(2);    /* Высокий контраст */
}

grayscale — оттенки серого

.grayscale {
  filter: grayscale(1);    /* Полностью серый */
  filter: grayscale(0.5);  /* Наполовину серый */
}

/* Цветное при наведении */
.image {
  filter: grayscale(1);
  transition: filter 300ms ease;
}
.image:hover {
  filter: grayscale(0);
}

saturate — насыщенность

.element {
  filter: saturate(0);    /* Обесцвечен (= grayscale) */
  filter: saturate(0.5);  /* Приглушённые цвета */
  filter: saturate(1);    /* Нормально */
  filter: saturate(2);    /* Яркие, насыщенные цвета */
}

sepia — сепия (ретро-эффект)

.vintage {
  filter: sepia(1);       /* Полная сепия */
  filter: sepia(0.5);     /* Лёгкий ретро-тон */
}

hue-rotate — сдвиг оттенка

.element {
  filter: hue-rotate(90deg);   /* Сдвиг на 90 градусов */
  filter: hue-rotate(180deg);  /* Инверсия оттенка */
  filter: hue-rotate(-30deg);  /* Тёплый сдвиг */
}

invert — инверсия

.inverted {
  filter: invert(1);      /* Полная инверсия */
  filter: invert(0.5);    /* Частичная */
}

/* Быстрая «тёмная тема» (грубо) */
.dark-mode img {
  filter: invert(1) hue-rotate(180deg);
}

opacity — прозрачность

.element {
  filter: opacity(0.5);   /* 50% прозрачности */
  /* Аналогично opacity: 0.5, но через GPU pipeline */
}

drop-shadow — тень

.element {
  /* drop-shadow учитывает форму элемента (в т.ч. прозрачность PNG) */
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));

  /* В отличие от box-shadow, повторяет контур элемента */
}

drop-shadow vs box-shadow: box-shadow — прямоугольная тень от box-модели. drop-shadow — тень по контуру элемента (PNG, SVG, clip-path).

Комбинирование фильтров

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

.disabled {
  filter: grayscale(1) opacity(0.5);
}

.blur()-overlay {
  filter: blur(8px) brightness(0.7);
}

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

Hover-эффект на галерее

.gallery img {
  transition: filter 300ms ease;
}

.gallery img:hover {
  filter: brightness(1.1) saturate(1.3);
}

Неактивный элемент

.card.disabled {
  filter: grayscale(1) opacity(0.6);
  pointer-events: none;
}

Ретро-фото

.photo-vintage {
  filter: sepia(0.5) contrast(1.2) brightness(0.95) hue-rotate(-10deg);
}

Drop-shadow для SVG

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

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

  1. filter на родителе размывает ВСЁ содержимое — для размытия фона используйте backdrop-filter
  2. drop-shadow не принимает inset и spread — в отличие от box-shadow
  3. Порядок фильтров имеет значение — grayscale brightness ≠ brightness grayscale
  4. Производительность — фильтры на большом количестве элементов могут тормозить

Практика

  • Создать hover-эффект: grayscale → цветной при наведении
  • Сделать vintage-фильтр из комбинации sepia + contrast + brightness
  • Использовать drop-shadow для SVG-иконки
  • Создать disabled-состояние через grayscale + opacity
  • Анимировать blur через transition

Связанные темы

Ресурсы