Istnieje właściwość filter, która pozwala nam dodawać filtry dla danego elementu. Nie będę tutaj sztucznie silił się, by opisać tą właściwość. Tu macie fajny opis, a tu jeden z wielu eksperymentów.

Tym wpisem chciałem tylko zwrócić uwagę, że istnieje też właściwość backdrop-filter, która działa bardzo podobnie ale dla elementów leżących w tle danego elementu. Nadaje się więc idealnie np. dla tła wszelakich okienek.

Ciekawe jest to, że jedną z dostępnych wartości jest url(), w którym możemy np. wskazać filtr z svg, co pozwala nam symulować np. efekt wody: https://www.youtube.com/watch?v=LHkvf3SNAPM.

Ale jeszcze bardziej ciekawe jest to, że podobne filtry svg możemy stosować dla backdrop-filter, co pozwala nam na przykład uzyskać efekt szkła:

Przykład użycia