CSS Filter Playground

Основные функции filter: blur() — размытие, brightness() — яркость, contrast() — контраст, grayscale() — оттенки серого, hue-rotate() — сдвиг оттенка, invert() — инверсия, opacity() — прозрачность, saturate() — насыщенность, sepia() — сепия. Можно комбинировать несколько фильтров в одном свойстве.

filter применяется к самому элементу и его содержимому (тексту, дочерним элементам, изображению). backdrop-filter воздействует на область за элементом — контент, который просвечивает через полупрозрачный фон. Для эффекта матового стекла используйте backdrop-filter.

Примените filter: grayscale(100%) для полного обесцвечивания. Для более «плёночного» вида добавьте contrast(1.1) и brightness(0.95). Сепия: filter: sepia(100%). Комбинируйте фильтры для уникальных стилей — например, grayscale(100%) sepia(30%) для тонированного монохрома.

Да, filter анимируется через transition и @keyframes. Популярные эффекты: наведение с плавным переходом от grayscale(100%) к grayscale(0), пульсация brightness, плавное размытие. Анимация blur может быть ресурсоёмкой — тестируйте производительность на мобильных.

Фильтры создают новый композитный слой и требуют перерисовки. Blur — самый «тяжёлый», особенно с большим радиусом. Grayscale и hue-rotate легче. Избегайте фильтров на больших областях при скролле. Для статических элементов влияние минимально.