Генератор фильтров CSS

Создание и визуализация пользовательских фильтров изображений CSS

Preview

CSS Code

фильтр: нет;

Управление фильтром

Blur 0px

Brightness 100%

Contrast 100%

Grayscale 0%

Поворот оттенка 0deg

Invert 0%

Opacity 100%

Saturate 100%

Sepia 0%

Как использовать фильтры CSS

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

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

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

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

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

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

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

1. Выбираем элемент

Выберите элемент HTML, к которому вы хотите применить фильтр. Это может быть изображение, фон или любой другой элемент.

2. Добавьте класс или ID

Если у элемента еще нет класса или идентификатора, добавьте его, чтобы упростить нацеливание с помощью CSS.

3. Применяем фильтр

Используйте CSSfilterв таблице стилей или встроенном стиле, чтобы применить сгенерированный фильтр.

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

4. Комбинируйте несколько фильтров

Вы можете объединить несколько функций фильтра, перечислив их одну за другой, разделив пробелами.

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

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

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

Chrome Firefox Safari Edge IE 11+ (partial)

Related Tools

Простое создание преобразований CSS3

Мощный, интуитивно понятный инструмент для создания сложных преобразований CSS3 без написания кода. Визуализируйте изменения в режиме реального времени и копируйте сгенерированный CSS для использования в своих проектах.

Создавайте идеальные макеты флексбоксов

Визуализируйте, настраивайте и генерируйте код флекбокса CSS с помощью нашего интуитивно понятного интерфейса перетаскивания.

Конвертер SCSS в CSS

Преобразуйте свой код SCSS в CSS. Быстро, просто и безопасно.

Из десятичного в двоичный

Преобразуйте десятичные числа в двоичный код без особых усилий

Генератор радиуса границы

Генератор CSS с радиусом границы для быстрого создания объявлений CSS с радиусом границы.