# Glassmorphism CSS 생성기

> Clean Markdown view of GeekNews topic #4910. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=4910](https://news.hada.io/topic?id=4910)
- GeekNews Markdown: [https://news.hada.io/topic/4910.md](https://news.hada.io/topic/4910.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-08-29T09:55:22+09:00
- Updated: 2021-08-29T09:55:22+09:00
- Original source: [ui.glass](https://ui.glass/generator/)
- Points: 7
- Comments: 2

## Topic Body

- macOS BigSur / Windows 11 에서 사용 하는 UI디자인 트렌드

- 상위 엘리멘트의 배경을 아래에 있는 이미지/색상/패턴이 Blur된 형태로 표시

ㅤ→ backdrop-filter: blur() 이용

- 배경 이미지/색상/Gradient 지정 및 Blur 값, 투명도, Saturation 조절 가능

## Comments



### Comment 6567

- Author: galadbran
- Created: 2021-08-29T16:54:45+09:00
- Points: 1

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

### Comment 6570

- Author: joyfui
- Created: 2021-08-29T21:38:33+09:00
- Points: 1
- Parent comment: 6567
- Depth: 1

저도 파이어폭스 써서 뭔 차인가 했더니 파폭이 아직 기본으로 지원을 안했던 거군요..

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

about:config 설정을 변경하면 작동하나 봅니다.