Что такое фильтры CSS?

Фильтры CSS позволяют применять к элементу графические эффекты, такие как размытие или сдвиг цвета. Они обычно используются для изображений, фона и границ.

Фильтры можно использовать для создания визуальных эффектов, улучшения изображений или создания уникальных элементов дизайна без необходимости использования внешних инструментов для редактирования изображений.

Поддерживаемые свойства фильтра CSS

• blur()- Применяет размытие по Гауссу к элементу.
• brightness()- Регулирует яркость элемента.
• contrast()- Регулирует контрастность элемента.
• grayscale()- Преобразует элемент в оттенки серого.
• hue-rotate()- Применяет поворот оттенка к элементу.
• invert()- Инвертирует цвета элемента.
• opacity()- Регулирует непрозрачность элемента.
• saturate()- Насыщает или обесцвечивает элемент.
• sepia()- Преобразует элемент в сепию.

Как применять фильтры

Используя CSS-код, сгенерированный этим инструментом, вы можете применять фильтры к любому элементу HTML. Вот как это сделать:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Совместимость с браузерами

Фильтры CSS широко поддерживаются в современных браузерах, включая Chrome, Firefox, Safari, Edge и Opera. Однако старые браузеры, такие как Internet Explorer, их не поддерживают.