6XC

CSS 글래스모피즘 생성기

실시간 미리보기로 유리(글래스모피즘) 효과를 디자인하세요 — 흐림, 투명도, 색조, 테두리를 조절하고 CSS를 복사하세요.

조회수 671회

유리 효과

글래스모피즘이란?

글래스모피즘은 서리 낀 유리 같은 느낌으로, backdrop-filter: blur()를 사용해 뒤쪽을 흐릿하게 만드는 반투명 패널에 은은한 테두리와 그림자를 조합한 것입니다. 화려하거나 이미지가 있는 배경 위에서 가장 잘 어울립니다 — 단색 배경에서는 흐림 효과가 보이지 않습니다.

슬라이더를 움직이며 실시간 미리보기를 확인하세요. 아래 CSS는 즉시 업데이트되며 바로 복사할 수 있습니다. Safari에 필요한 -webkit-backdrop-filter 접두사는 생성된 코드에 이미 포함되어 있습니다.

자주 묻는 질문

유리 효과가 왜 밋밋하게 보이나요?

backdrop-filter는 변화가 있는 배경 위에서만 보입니다 — 요소를 그라데이션이나 이미지 위에 배치하세요. 브라우저 지원도 확인하세요: Safari는 -webkit- 접두사가 필요합니다(생성된 코드에 포함됨).

backdrop-filter는 성능에 영향을 주나요?

흐림 효과는 GPU 가속을 사용하지만 공짜는 아닙니다. 수십 개의 요소가 아니라 카드, 헤더 등 몇 개의 주요 표면에만 사용하고, 모바일에서는 흐림 반경을 적당히 유지하세요.

클래식한 유리 느낌에는 어떤 값이 좋나요?

좋은 시작점: 불투명도 15-25%의 흰색 배경, 8-12px 흐림, 30% 흰색의 1px 테두리, 16px 반경 — 이 생성기의 기본값입니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기