Основные функции filter

Функция	Назначение	Пример	Результат
blur(amount)	Размытие (гауссово)	blur(4px)
brightness(amount)	Яркость	brightness(1.2) → +20%
contrast(amount)	Контраст	contrast(1.5) → +50%
drop-shadow(offset-x offset-y blur-radius color)	Тень (лучше box-shadow для прозрачных PNG/SVG)	drop-shadow(2px 2px 4px rgba(0,0,0,0.3))
grayscale(amount)	Обесцвечивание	grayscale(100%)
hue-rotate(angle)	Поворот оттенка (в цветовом круге)	hue-rotate(90deg)
invert(amount)	Инверсия цветов	invert(100%) → негатив
opacity(amount)	Прозрачность	opacity(0.8) (аналог opacity, но как фильтр)
saturate(amount)	Насыщенность	saturate(2) → в 2 раза ярче цвета
sepia(amount)	Сепия (винтажный эффект)	sepia(100%)

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

Фильтры применяются слева направо, и их можно комбинировать:

img {
  filter: grayscale(100%) brightness(1.2) contrast(1.1);
}

→ сначала обесцветит, потом сделает ярче, потом повысит контраст.

⚠️ Порядок влияет на результат!

Примеры использования

1. "Наведи, чтобы раскрасить"

   img {
     filter: grayscale(100%) saturate(0);
     transition: filter 0.3s ease;
   }
   img:hover {
     filter: grayscale(0%) saturate(1);
   }

2. Эффект "ночного режима" для изображений

   .night-mode img {
     filter: invert(100%) hue-rotate(180deg) brightness(1.1);
   }

3. Приглушение неактивных элементов

   img {
     filter: grayscale(80%) opacity(0.7);
   }

4. Винтажная фотография

   img {
     filter: sepia(60%) contrast(1.2) brightness(1.1);
   }