글래스모피즘 CSS가 안 보이는 이유
글래스모피즘(glassmorphism) CSS를 그대로 복사해 붙였는데 화면이 그대로라면, 코드가 틀린 게 아니라 backdrop-filter가 걸리는 조건 자체를 못 채운 경우가 대부분입니다. blur 값을 아무리 올려도 카드 배경이 완전히 불투명하거나 카드 뒤에 흐리게 만들 대상이 없으면, 육안으로는 아무 변화도 보이지 않습니다.
요약 ① backdrop-filter는 요소 자신이 아니라 요소 "뒤"에 이미 그려진 배경을 흐리게 만드는 필터입니다. ② 카드 자신의 배경이 완전 불투명(알파 1)이면 뒤가 가려져 블러 효과 자체가 화면에 드러나지 않습니다. ③ 뒤 배경이 단색이면 블러를 걸어도 여전히 같은 단색이라 눈으로는 차이가 안 보입니다.
backdrop-filter를 걸어도 아무 변화가 없는 이유
가장 흔한 상황은 이렇습니다. 흰 배경 페이지에 카드 하나를 두고 backdrop-filter: blur(10px)을 넣었는데 카드가 그냥 하얀 사각형으로만 보입니다. CSS 문법은 맞고 개발자도구에도 속성이 적용돼 있는데 눈으로는 아무것도 달라지지 않은 것처럼 느껴집니다.
backdrop-filter는 요소 자신의 내용이 아니라, 그 요소 뒤에 이미 렌더링된 화면(배경색·이미지·다른 요소)을 가져와 흐리게 처리하는 필터입니다. 이 점에서 요소 자신과 자식 콘텐츠까지 흐려 버리는 filter: blur()와는 동작 대상이 완전히 다릅니다.
문제는 두 가지 조건이 같이 충족돼야 눈에 보인다는 점입니다. 첫째, 카드 자신의 배경이 rgba(255,255,255,1)처럼 완전 불투명하면 뒤가 아예 가려지므로 블러된 배경이 비칠 틈이 없습니다. 둘째, 뒤 배경이 흰색 같은 단색이면 블러 처리를 해도 결과는 여전히 같은 단색이라 변화가 눈에 띄지 않습니다.
코드만 보고 확인하는 방법
도구 없이도 브라우저 개발자도구만으로 원인을 좁힐 수 있습니다. 먼저 카드 자신의 background 값을 봅니다. 알파 채널이 1이거나 아예 없는 단색(#ffffff 같은 HEX)이라면, 그 값을 rgba(255, 255, 255, 0.25)처럼 알파를 1 미만으로 낮춰야 뒤가 비칠 공간이 생깁니다.
그다음 카드 뒤에 실제로 흐릴 대상이 있는지 봅니다. 배경이 그라디언트나 사진, 다른 색 도형처럼 시각적으로 변화가 있는 요소여야 블러 전후 차이가 드러납니다. 단색 배경 위에서는 조건을 다 맞춰도 육안 차이가 거의 없습니다.
마지막으로 개발자도구 Elements 패널의 Computed 탭에서 backdrop-filter 항목에 취소선이 없는지 확인합니다. 취소선이 있거나 목록에 아예 없다면 그 브라우저·버전에서 속성이 적용되지 않고 있다는 뜻이며, 사파리 호환을 위해 -webkit-backdrop-filter를 표준 속성과 나란히 함께 적어 둬야 합니다.
저희 도구로 확인하기. 위 조건들을 배경 이미지 준비하고 알파값 계산하고 접두사까지 챙겨서 손으로 맞추려면 매번 번거롭습니다. 슬라이더로 흐림·투명도·채도·테두리를 조절하면서 컬러 배경 위 실시간 미리보기로 바로 확인하고, 조건이 맞춰진 CSS를 그대로 복사할 수 있습니다.
무료 · 가입 불필요 · 슬라이더로 실시간 미리보기 후 CSS 그대로 복사
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| blur를 올려도 카드가 그냥 하얀 사각형으로 보임 | 카드 background가 완전 불투명(알파 1)이라 뒤가 비치지 않음 |
| 카드는 반투명한데 흐릿한 느낌이 안 남 | 카드 뒤 배경이 단색이라 블러링해도 같은 색만 나옴 |
| 크롬에서는 되는데 다른 브라우저에서 안 보임 | -webkit-backdrop-filter 접두사 누락 또는 해당 브라우저 미지원 |
정리
- backdrop-filter는 요소 뒤의 화면을 흐리게 하는 필터이며, 요소 자신을 흐리는
filter: blur()와는 대상이 다릅니다. - 카드 자신의 배경 알파값이 1이면 뒤가 가려져 블러가 안 보이므로, 알파를 1 미만으로 낮춰야 합니다.
- 카드 뒤 배경이 단색이면 조건을 다 맞춰도 육안 차이가 거의 없으니 그라디언트·사진처럼 변화 있는 배경으로 확인합니다.
- 사파리 대응을 위해
-webkit-backdrop-filter를 표준 속성과 함께 적어 둡니다.
무료 · 가입 불필요 · 슬라이더로 실시간 미리보기 후 CSS 그대로 복사
자주 묻는 질문
backdrop-filter와 filter: blur()는 뭐가 다른가요?
filter: blur()는 요소 자신과 그 안의 글자·자식 요소까지 전부 흐리게 만듭니다. 반면 backdrop-filter는 요소 자신의 내용은 그대로 두고, 요소 뒤에 이미 그려진 배경만 흐리게 만듭니다. 유리 카드 안의 글자는 선명하게, 뒤 배경만 뿌옇게 보이길 원한다면 backdrop-filter를 써야 하는 이유입니다.
미리보기의 배경 그라디언트도 복사한 CSS에 포함되나요?
아니요. 미리보기의 컬러 배경은 유리 효과가 잘 보이는지 확인하기 위한 용도일 뿐이며, 복사되는 CSS에는 유리 카드 자신의 background·border-radius·backdrop-filter·-webkit-backdrop-filter·border·box-shadow 여섯 줄만 담깁니다. 실제로 어떤 배경 위에 올릴지는 페이지마다 다르므로 직접 배치해야 합니다.
모든 브라우저에서 블러 정도가 똑같이 보이나요?
-webkit-backdrop-filter까지 챙겨도 브라우저·기기별 렌더링 엔진 차이로 흐림 정도가 미세하게 달라 보일 수 있습니다. 실제로 배포하기 전에는 지금 코드가 실행될 주요 브라우저에서 한 번씩 눈으로 확인하는 편이 안전합니다.