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

Визуальный инструмент для создания и предварительного просмотра свойств фильтров CSS.

Настройки фильтра
Отрегулируйте каждое свойство фильтра
Предустановки
Попробуйте предопределенные стили фильтров
Предварительный просмотр
Посмотрите сгенерированные эффекты фильтра на изображении по умолчанию

Оригинал

Обои Windows XP Bliss

Отфильтровано

Отфильтрованные обои Windows XP Bliss
Filter Preview
Сгенерированный CSS
filter: none;
Объяснение функций фильтра CSS

Визуальные эффекты

  • blur(px): Эффект размытия
  • brightness(%): Регулировка яркости
  • contrast(%): Регулировка контрастности
  • opacity(%): Регулировка непрозрачности

Цветовые эффекты

  • grayscale(%): Эффект оттенков серого
  • hue-rotate(deg): Поворот оттенка
  • invert(%): Инверсия цвета
  • saturate(%): Регулировка насыщенности
  • sepia(%): Эффект сепии

Советы по использованию

  • • Объедините несколько фильтров, разделенных пробелами
  • • Применяйте к любому элементу HTML, а не только к изображениям
  • • Используйте с анимацией CSS для динамических эффектов
  • • Используйте backdrop-filter, чтобы применять только к фонам
    Генератор фильтров CSS