Glassmorphism CSS 생성기

- macOS BigSur / Windows 11 에서 사용 하는 UI디자인 트렌드
- 상위 엘리멘트의 배경을 아래에 있는 이미지/색상/패턴이 Blur된 형태로 표시
ㅤ→ backdrop-filter: blur() 이용
- 배경 이미지/색상/Gradient 지정 및 Blur 값, 투명도, Saturation 조절 가능

[galadbran]

blur 와 saturation 값을 아무리 바꿔도 달라지는 게 없길래 이상하다 싶었는데, edge 에서는 잘 되고 firefox 에서는 안되는군요.. 하하

[joyfui]

저도 파이어폭스 써서 뭔 차인가 했더니 파폭이 아직 기본으로 지원을 안했던 거군요..
https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter
about:config 설정을 변경하면 작동하나 봅니다.