CSS 글래스모피즘 생성기
반투명 틴트, backdrop-filter 블러와 채도(-webkit- 접두사 포함), 테두리, 둥근 모서리, 그림자를 조절해 간유리 효과 CSS를 만들고 미리 봅니다.
글래스모피즘은 패널을 간유리처럼 보이게 합니다. 뒤쪽 화면이 흐려지고 약간 더 선명해진 채 비치며, 그 위에 얇은 반투명 틴트와 밝은 테두리가 얹힙니다. 이 효과는 CSS backdrop-filter 속성에 기대고 있습니다. 이 생성기는 반투명 배경, Safari에서 한동안 필요했던 -webkit- 중복 줄이 포함된 backdrop-filter: blur() saturate(), 테두리, 모서리, 그림자까지 규칙 전체를 만들어 주고 다채로운 배경 위에 카드를 보여 줍니다.
사용 방법
- 틴트 색과 불투명도를 고릅니다(대부분의 디자인은 10~30%가 알맞습니다).
- 비쳐 보이는 배경의 블러와 채도를 정합니다.
- 테두리 불투명도, 모서리 둥글기, 그림자를 조절합니다.
- CSS를 복사해 이미지나 그라데이션 위에 놓은 요소에 적용하세요. 단색 배경에서는 유리가 보이지 않습니다.
계산식
background: rgba(틴트, 불투명도) · backdrop-filter: blur(<px>) saturate(<%>) · border: 1px solid rgba(틴트, 테두리 불투명도)
블러 반지름은 가우시안 블러의 표준편차입니다. saturate(180%)는 유리 뒤의 색을 1.8배로 선명하게 합니다. 이미지 미리보기에서는 backdrop-filter를 실행할 수 없어서, 미리보기는 SVG 필터로 그 효과를 흉내 냅니다.
예시
기본값은 background: rgba(255, 255, 255, 0.2)(흰색 20%)에 backdrop-filter: blur(12px) saturate(180%), 흰색 30%의 1 px 테두리, 16 px 모서리, 부드러운 0 8px 32px 그림자입니다. 검정 35%, 블러 8 px, 채도 100%의 어두운 변형에서는 saturate() 단계가 빠지고 blur(8px)만 남습니다.
자주 묻는 질문
유리 효과가 보이지 않는 이유는 무엇인가요?
backdrop-filter는 요소 뒤에 있는 것에만 영향을 줍니다. 단색 페이지에서는 흐리게 할 대상이 없어서 카드가 그냥 반투명하게 보입니다. 사진, 그라데이션, 겹치는 도형 위에 올려 보세요.
backdrop-filter는 성능에 나쁜가요?
요소 뒤의 내용이 바뀔 때마다 브라우저가 다시 흐리게 처리해야 하므로 일반 배경보다 비용이 큽니다. 유리 패널 몇 개는 괜찮지만, 저사양 휴대폰에서 스크롤하거나 움직이는 내용 위에 넓은 블러 영역을 두는 것은 피하세요.
간유리 효과는 접근성에 괜찮은가요?
글자가 계속 읽을 수 있을 때만 그렇습니다. 복잡한 배경은 예측할 수 없게 명암비를 낮추므로 틴트 불투명도와 블러를 충분히 주고, 배경의 가장 어두운 곳과 밝은 곳에서 글자 색을 확인하세요.
출처
최종 업데이트:
이 입력값이 담긴 페이지 주소: https://kakao.mobile/ko/tools/css-glassmorphism-generator/
인용·퍼가기
kakaoCalc. (2026, November 8). CSS 글래스모피즘 생성기. https://kakao.mobile/ko/tools/css-glassmorphism-generator/
“CSS 글래스모피즘 생성기.” kakaoCalc, 8 Nov. 2026, kakao.mobile/ko/tools/css-glassmorphism-generator/.