CSS 글래스모피즘 생성기

이 도구는 무엇인가요?

글래스모피즘은 요소가 서리 낀 유리처럼 보이는 UI 스타일입니다 — 반투명 배경이 뒤의 색을 비추고, backdrop-filter: blur()가 그 배경을 흐려서 단순한 투명 패널이 아니라 유리처럼 읽히게 만듭니다. 얇고 반투명한 테두리와 둥근 모서리가 보통 이 룩을 마무리합니다.

이 도구로 그 효과를 시각적으로 만들 수 있습니다. 미리보기가 움직이는 그라디언트 배경 위에 놓인 것도 블러가 잘 보이게 하기 위해서입니다 — 글래스모피즘은 뒤에 색이나 디테일이 있는 무언가가 있어야만 제대로 읽히지, 밋밋한 흰 페이지에서는 그렇지 않습니다. 배경색의 투명도, 블러 강도, 테두리 투명도, 모서리 반경을 조정한 뒤 생성된 CSS를 복사하세요.

출처: Filter Effects Module Level 1, W3C — 이 효과의 기반이 되는 backdrop-filter를 정의합니다.

왜 사용해야 할까요?

• 화려한 애니메이션 배경 위에서 실시간 미리보기를 확인할 수 있어서, 빈 배경에 대고 블러 값을 추측할 필요 없이 실제 반투명 유리 효과를 직접 볼 수 있습니다.
• 배경 투명도, 백드롭 블러 강도, 테두리 투명도, border-radius를 한곳에서 모두 제어할 수 있습니다.
• backdrop-filter와 -webkit-backdrop-filter 접두사를 함께 자동으로 출력해 사파리 지원을 놓칠 걱정이 없습니다.
• 전적으로 브라우저 안에서 동작합니다 — 설정한 내용이 어디로도 업로드되지 않습니다.
• 무료, 가입 불필요, 모바일에서도 사용 가능.

사용 방법

1. 배경색을 고르고 투명도를 조정하세요 — 낮은 투명도(10~25%)는 유리처럼 읽히고, 높은 투명도는 색이 있는 불투명 패널처럼 보입니다.
2. 블러 강도를 높여 요소 뒤의 배경을 흐리게 만드세요 — 이게 바로 투명도 자체와는 별개로 반투명 유리 룩을 실제로 만들어내는 요소입니다.
3. 테두리 투명도를 조정해 은은한 밝은 테두리를 더하세요 — 유리 카드가 배경에 묻히지 않고 독립된 표면처럼 읽히는 데 도움이 됩니다.
4. border-radius를 설정해 모서리를 둥글게 만드세요 — 글래스모피즘 카드는 거의 항상 둥글고 각진 모서리는 드뭅니다.
5. 생성된 CSS를 복사해 스타일시트에 붙여넣으세요. 요소 뒤에는 반드시 색이나 질감이 있어야 한다는 점을 기억하세요 — 글래스모피즘은 밋밋한 단색 배경 위에서는 보이지 않습니다.

예시

입력

배경: 흰색, 투명도 20% · 블러: 10px · 테두리 투명도: 30% · 반경: 16px

결과

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

화려한 배경이나 사진 위에서 로그인 패널, 내비게이션 바, 대시보드 위젯에 쓰이는 클래식한 반투명 유리 카드 스타일입니다.

사파리와 브라우저 지원

backdrop-filter는 현재 Chrome, Firefox, Edge, Safari에서 지원되지만, 사파리는 역사적으로 블러를 렌더링하려면 접두사 없는 속성과 함께 -webkit-backdrop-filter 접두사가 있어야 했습니다 — 없으면 오래된 사파리 버전은 블러를 조용히 무시하고 밋밋한 투명 배경만 보여줍니다. 이런 이유로 이 도구는 항상 두 선언을 함께 출력합니다.

현재 브라우저 호환성에 대한 자세한 내용은 MDN의 backdrop-filter 문서를 참고하세요: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

글래스모피즘에 뒤 배경이 필요한 이유

backdrop-filter는 요소 뒤에 시각적으로 존재하는 것만 흐립니다 — 배경 이미지, 그라디언트, 다른 색이 있는 요소, 또는 아래로 스크롤되는 콘텐츠 같은 것들이요. 밋밋한 흰색이나 단색 배경 위에서는 흐릴 게 아무것도 없어서 효과가 보이지 않고, 요소는 그냥 살짝 색이 있는 둥근 박스처럼만 보입니다. 효과가 제대로 읽히려면 항상 그라디언트, 사진, 혹은 그 밖에 화려한 배경 위에 글래스모피즘 요소를 배치하세요.

다른 CSS 효과와 조합하기

글래스모피즘 카드는 깊이감을 더하기 위해 은은한 box-shadow를 밑에 함께 쓰는 경우가 많습니다. 여기서 반투명 유리 CSS를 만든 뒤 박스 섀도우 생성기로 부드러운 그림자를 추가해 같은 요소에 두 선언을 함께 적용하세요.

→ 박스 섀도우 생성기 · Border Radius 생성기

자주 묻는 질문