CSS-фильтр фона: применение визуальных эффектов к фону

  1. Эффект размытия:

    .element {
 backdrop-filter: blur(5px);
}

    При этом к фону элемента применяется эффект размытия.

  2. Эффект оттенков серого:

    .element {
 backdrop-filter: grayscale(100%);
}

    При этом фон преобразуется в оттенки серого.

  3. Эффект контрастности:

    .element {
 backdrop-filter: contrast(200%);
}

    Это увеличивает контрастность фона.

  4. Эффект яркости:

    .element {
 backdrop-filter: brightness(150%);
}

    Это увеличивает яркость фона.

  5. Эффект сепии:

    .element {
 backdrop-filter: sepia(100%);
}

    При этом к фону будет применен оттенок сепии.

  6. Эффект поворота оттенка:

    .element {
 backdrop-filter: hue-rotate(90deg);
}

    Оттенок фона поворачивается на 90 градусов.

  7. Инвертировать эффект:

    .element {
 backdrop-filter: invert(100%);
}

    Это инвертирует цвет фона.

  8. Несколько эффектов:

    .element {
 backdrop-filter: grayscale(50%) blur(3px) brightness(120%);
}

    Несколько эффектов можно объединить, разделив их пробелами.