사용법
- 투명도·블러·테두리 둥글기·테두리 투명도 슬라이더를 움직여 원하는 느낌을 만듭니다.
- 유리 색조를 바꿔 따뜻하거나 차가운 톤을 줄 수 있습니다.
- 위 미리보기(컬러 배경 위 카드)로 실제 효과를 확인합니다.
- "CSS 복사"로 코드를 복사해 프로젝트에 붙여 넣습니다.
활용 팁
- 뒤에 배경이 있어야 보입니다: backdrop-filter는 요소 뒤의 콘텐츠를 흐리게 하는 효과라, 사진이나 그라데이션 배경 위에서 가장 잘 드러납니다.
- 가독성 확인: 반투명 위 글자는 대비가 약해지기 쉽습니다. 텍스트가 있으면 투명도를 너무 높이지 말고 글자 색 대비를 점검하세요.
- 사파리 대응: 출력 코드에는 -webkit-backdrop-filter도 포함되어 사파리에서도 동작합니다.
자주 묻는 질문
Q. 글래스모피즘이 무엇인가요?
반투명한 유리판이 떠 있는 듯한 디자인 스타일입니다. 요소를 반투명하게 만들고 뒤 배경을 흐리게(블러) 비치게 해서 깊이감을 줍니다. 핵심은 backdrop-filter: blur()와 반투명 배경색, 옅은 흰색 테두리의 조합입니다. iOS·윈도우 등에서 즐겨 쓰입니다.
Q. backdrop-filter가 일부 브라우저에서 안 먹혀요.
최신 크롬·사파리·엣지·파이어폭스는 모두 지원하지만, 사파리는 -webkit-backdrop-filter 접두사가 함께 필요합니다. 이 생성기는 두 줄을 모두 출력합니다. 또 효과는 요소 '뒤'에 다른 콘텐츠나 배경이 있어야 보이므로, 단색 배경 위에서는 흐림 효과가 드러나지 않습니다.
Q. 글래스모피즘을 쓸 때 주의할 점은요?
반투명 위의 글자는 대비가 떨어져 가독성이 나빠지기 쉽습니다. 텍스트가 들어간다면 투명도를 너무 높이지 말고, 글자 색과의 대비를 확인하세요. 또 backdrop-filter는 성능 부담이 있어 화면에 너무 많이 쓰면 느려질 수 있으니 핵심 요소에만 쓰는 것이 좋습니다.
함께 보면 좋은 도구