글래스모피즘 생성기

글래스모피즘 생성기란

글래스모피즘(Glassmorphism)은 반투명한 배경 위에 흐림 효과를 얹어 마치 젖빛 유리를 통해 뒤가 비쳐 보이는 듯한 카드·패널 디자인 기법입니다. 이 생성기는 흐림(blur)과 배경 투명도 두 가지 값을 슬라이더로 조절하면 실시간 미리보기가 바뀌고, 그에 맞는 CSS 코드를 바로 복사할 수 있게 해 줍니다. 테두리와 모서리 둥글기는 유리 느낌에 어울리는 기본값으로 생성 코드에 함께 포함됩니다. 핵심은 backdrop-filter: blur() 한 줄이며, 이 값을 눈으로 확인하며 맞추는 것이 이 도구의 역할입니다.

사용 방법

먼저 흐림(blur) 슬라이더로 뒷배경이 얼마나 뿌옇게 보일지 정합니다. 보통 8~16px 사이에서 유리 질감이 가장 자연스럽습니다. 다음으로 투명도를 조절하는데, 이 값은 배경색의 알파(불투명도)를 바꿔 카드가 얼마나 비쳐 보일지를 결정합니다. 테두리는 흰색을 아주 옅게(예: 20~30% 불투명도) 넣어야 유리의 가장자리 반사처럼 보입니다. 값이 마음에 들면 코드 복사 버튼을 눌러 그대로 CSS에 붙여 넣으면 됩니다. 미리보기가 잘 보이려면 뒤에 사진이나 그라디언트 같은 컬러 배경이 있어야 효과가 드러납니다.

작동 원리

이 효과는 두 겹으로 만들어집니다. 첫째, backdrop-filter: blur(Npx)가 요소 뒤에 있는 픽셀을 흐리게 처리합니다. 요소 자체가 아니라 뒤 배경을 흐리는 것이 핵심이라, 카드가 완전히 불투명하면 흐림이 보이지 않습니다. 그래서 둘째로 배경색에 rgba(255,255,255,0.15)처럼 낮은 알파값을 줘 뒤가 비치게 만듭니다. 생성기가 만드는 코드는 대략 다음과 같습니다.

Safari 등 일부 환경에서는 -webkit-backdrop-filter를 함께 넣어야 동작하므로, 생성기는 이 접두사 버전도 코드에 포함해 줍니다.

이럴 때 씁니다

사진 배경 위에 얹는 로그인 카드, 히어로 영역의 반투명 내비게이션 바, 음악·날씨 앱의 위젯, 모달 창 뒤를 살짝 흐리는 오버레이 등에 잘 어울립니다. 배경이 단색이거나 흰색인 화면에서는 흐릴 대상이 없어 효과가 밋밋해지므로, 컬러풀한 이미지나 그라디언트 위에서 쓰는 것이 좋습니다.

실전 팁

흐림값을 너무 키우면(30px 이상) 뒤가 완전히 뭉개져 유리보다 불투명 판처럼 보입니다. 텍스트 가독성을 위해 투명도는 0.1~0.25 정도로 유지하고, 글자색은 배경과 대비되게 잡으세요. blur는 GPU 합성을 쓰기 때문에 화면 안에 유리 카드를 수십 개 깔면 저사양 기기나 모바일에서 스크롤이 버벅일 수 있으니 개수를 절제하는 편이 좋습니다. 흰 테두리 대신 아주 옅은 안쪽 그림자를 더하면 유리 두께감이 살아납니다.

자주 묻는 질문