CSS의 글래스모피즘이란 무엇인가요?

글래스모피즘은 반투명 레이어와 뒤 배경의 강한 블러, 그리고 은은한 테두리 하이라이트로 서리 낀 유리를 흉내 내는 디자인 스타일입니다. CSS 레시피는 짧습니다 — 반투명 배경, 서리 효과를 위한 backdrop-filter: blur(), 얇은 밝은 테두리. 2020~2021년경 애플의 Big Sur를 기점으로 주류가 됐고, 이후 카드·모달·플로팅 내비게이션의 단골 기법이 됐습니다.

backdrop-filter는 모든 브라우저에서 동작하나요?

2026년 기준 Chromium 계열(Chrome, Edge, Brave, Opera, Samsung Internet), Firefox 103+(2022년 7월 이후), Safari에서 모두 동작합니다 — Safari는 -webkit- 접두사가 필요한데 이 도구가 자동으로 함께 출력합니다. 남은 함정은 오래된 안드로이드 웹뷰입니다. 그쪽까지 지원해야 한다면 @supports (backdrop-filter: blur(1px))로 효과를 분기하고 단색 폴백을 제공하세요.

유리 효과가 회색빛으로 밋밋하게 보이는 이유는 무엇인가요?

글래스모피즘을 망치는 요인 세 가지: 패널 뒤가 단색이라 굴절시킬 색이 없을 때, 블러가 8px 미만이라 '뿌옇다'에 그칠 때, 그리고 채도(saturate)를 빼먹을 때입니다. backdrop-filter 안에 saturate(180%)를 넣으면 비치는 색이 살아나면서 고급스러운 깊이가 생깁니다 — 이 도구의 4가지 배경 프리셋을 시험해 보세요. 같은 패널이 어두운 회색 배경에선 끔찍해 보이지만 화려한 그라디언트 위에선 놀랍도록 멋있습니다.

글래스모피즘은 접근성에 좋은가요?

잘 만들면 가능하지만, WCAG 대비 검사를 가장 쉽게 떨어뜨리는 디자인이기도 합니다. 글래스 위 텍스트는 반드시 대비 도구로 검증하세요(렌더링된 패널 스크린샷을 배경 샘플로). 배경이 사진이라면 글래스 아래에 어두운 스크림(rgba(0,0,0,0.3))을 깔아주세요. prefers-reduced-transparency 미디어 쿼리로 단색 폴백을 제공하고, 작은 본문 텍스트에는 글래스를 쓰지 마세요 — 크롬 영역과 핵심 CTA에만 한정하는 게 좋습니다.

backdrop-filter의 성능 비용은 어느 정도인가요?

backdrop-filter는 GPU 가속을 사용하지만, 뒤 콘텐츠를 별도 레이어로 합성해야 하므로 메모리가 더 들고 페인트 시간이 길어집니다. 데스크톱이나 최신 폰에서는 화면당 1~2개 정도는 체감되지 않습니다. 영상 배경 위에 10개를 겹쳐 올리면 저가 안드로이드 기기는 30fps까지 떨어질 수 있습니다. 끊김이 보이면 DevTools 성능 탭으로 프로파일링하고, will-change: backdrop-filter는 꼭 필요한 곳에만 절제해서 쓰세요.

CSS 글래스모피즘 생성기

네 가지 배경 위에서 실시간으로 미리보면서 프로스티드 글라스 UI 패널을 만들어 보세요. 글라스를 고급스럽게 보이게 하는 saturate() 트릭이 포함된 크로스 브라우저 CSS를 출력합니다.

테스트 배경

틴트 색상

틴트 불투명도: 0.18

블러(blur): 16px

채도(saturation): 180%

테두리 (색상 · 불투명도)

0.25

모서리 둥글기: 20px

부드러운 드롭 섀도 추가

미리보기

글라스 패널

이 카드를 알록달록한 배경 위에 올려 두면 뒤에 있는 모든 것이 글라스를 통해 굴절되어 보입니다.

CSS

.glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
}

글래스모피즘은 세 가지가 필요합니다. 반투명 배경 틴트, 강한 backdrop-filter 블러, 그리고 은은한 테두리 하이라이트. 이 셋을 알록달록한 바탕(그라디언트, 사진, 기하학 도형) 위에 얹으면 애플 Big Sur가 유행시킨 프리미엄 프로스티드 글라스 효과가 완성됩니다.

사용 방법

1배경 프리셋(그라디언트, 사진, 다크, 기하학)을 선택하세요 — 글래스모피즘은 화려한 배경에서만 멋있어 보이므로 여러 배경에서 테스트하세요.
2틴트 색상과 불투명도를 설정하세요. 고급스러운 글래스는 보통 #ffffff를 0.10~0.25 불투명도로 사용하고, 검정 틴트를 0.20~0.40으로 쓰면 '다크 글래스'가 됩니다.
3블러(12~20px이 가장 좋음)와 채도(애플 기본값 180% — 130% 이하면 색이 빠짐)를 조절하세요.
4테두리를 다듬으세요. 1px의 흰색 테두리를 0.20~0.30 불투명도로 두면 입체감을 주는 하이라이트가 생깁니다.
5패널을 배경에서 떼어내야 한다면 부드러운 드롭섀도우를 켜세요. 그 다음 '복사'를 누르고 CSS를 스타일시트에 붙여넣으면 끝입니다.

주요 기능

4가지 다른 배경(그라디언트, 사진, 다크, 기하학)에서 실시간 미리보기 — 실제 맥락에서 유리가 어떻게 굴절되는지 바로 확인
틴트 색상, 불투명도, 블러, 채도, 테두리 색상/불투명도, 모서리 반경, 그림자를 모두 독립적으로 제어
Safari + Chromium + Firefox 전체 지원을 위해 backdrop-filter와 -webkit-backdrop-filter를 함께 출력
고급 글래스 UI 특유의 색감 깊이를 만드는 saturate(180%) 트릭이 자동 포함
완전 클라이언트 사이드 — 서버도 가입도 없고, 복사 붙여넣기로 바로 사용 가능

자주 묻는 질문

더 알아보기

2026년 CSS 글래스모피즘 — 진짜로 멋있어 보이는 서리 유리 UI 실전 가이드