В дополнение к уже изученным фильтрам (blur, brightness, grayscale и др.) есть ещё несколько полезных эффектов.

1. backdrop-filter — фильтр для фона за элементом

Применяет фильтр к фону, который находится позади элемента. Создаёт эффект «стекла» или «размытия заднего фона».

Возможные значения:

• blur(px) — размытие фона за элементом
• brightness(%) — яркость фона за элементом
• contrast(%) — контрастность фона за элементом
• grayscale(%) — чёрно-белый фон за элементом

.glass {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.3);
}

2. mix-blend-mode — режимы наложения

Определяет, как цвет элемента смешивается с цветом фона.

Возможные значения:

• normal — обычный (без смешивания) — значение по умолчанию
• multiply — тёмные цвета остаются тёмными, светлые становятся прозрачными
• screen — светлые цвета остаются светлыми, тёмные становятся прозрачными
• overlay — сочетает multiply и screen в зависимости от яркости фона
• difference — показывает разницу в яркости между цветом элемента и фоном

Сравнение на примере (три буквы A на градиентном фоне):

3. clip-path — обрезка элемента

Обрезает элемент по заданной форме. Кнопка остаётся кликабельной только в области видимой части.

Возможные значения:

• circle(50%) — круг (кнопка становится круглой)
• ellipse(50% 30%) — эллипс
• polygon(0% 0%, 100% 0%, 50% 100%) — треугольник
• inset(20%) — внутренний отступ (обрезает края)

.circle-btn {
    clip-path: circle(50%);
}
.triangle-btn {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}