한때 음악 어플의 앨범 커버이미지 ui에서 자주 볼 수 있었던 흐림 효과를 CSS로 구현할 수 있다.
backdrop-filter 를 통해 구현할 수 있는데, IE가 지원 중단 되면서 부터 비교적 자유롭게 사용할 수 있게 되었다.
사용법은 아래와 같다.




[!]blur[/!]
backdrop-filter 중에 내가 가장 자주 사용하는 속성은 blur.
 
위와 같이 적용해 주면 되는데,
다만, 부모 엘리먼트에 이미 backgrop-filter 가 적용되어 있다면, 자식 요소에서는 적용되지 않는다는 점을 주의하자.


[!]invert / sepia등 다양한 속성[/!]
제공되는 다양한 속성 중 inver와 sepia를 비롯해 다양한 속성을 제공한다.
예시는 아래와 같다.
 

 


아래는 Mozilla 가이드 페이지에서 제공하는 속성 설명이다.