Генератор фильтров CSS
Визуальный инструмент для создания и предварительного просмотра свойств фильтров CSS.
Настройки фильтра
Отрегулируйте каждое свойство фильтра
Предустановки
Попробуйте предопределенные стили фильтров
Предварительный просмотр
Посмотрите сгенерированные эффекты фильтра на изображении по умолчанию
Оригинал
Отфильтровано
Filter Preview
Сгенерированный CSS
filter: none;Объяснение функций фильтра CSS
Визуальные эффекты
- • blur(px): Эффект размытия
- • brightness(%): Регулировка яркости
- • contrast(%): Регулировка контрастности
- • opacity(%): Регулировка непрозрачности
Цветовые эффекты
- • grayscale(%): Эффект оттенков серого
- • hue-rotate(deg): Поворот оттенка
- • invert(%): Инверсия цвета
- • saturate(%): Регулировка насыщенности
- • sepia(%): Эффект сепии
Советы по использованию
- • Объедините несколько фильтров, разделенных пробелами
- • Применяйте к любому элементу HTML, а не только к изображениям
- • Используйте с анимацией CSS для динамических эффектов
- • Используйте backdrop-filter, чтобы применять только к фонам