글래스모피즘 생성기
반투명 유리 패널 디자인: 블러, 투명도, 하이라이트 테두리, 부드러운 섀도 — 유리 뒤에는 라이브 컬러풀 씬.
참고: backdrop-filter는 Safari에서 -webkit- 프리픽스가 필요합니다. 출력에 자동 포함됩니다.
글래스모피즘 생성기 사용법
- 틴트 색상을 고르고 패널 투명도를 설정하세요. 낮을수록 더 「유리」같아집니다.
- 블러를 높여 배경을 반투명하게 만들고, 채도를 더해 유리 뒤 색상을 선명하게 하세요.
- 은은한 밝은 테두리(반투명 흰색)를 추가해 유리 가장자리 하이라이트를 표현합니다.
- 부드러운 드롭 섀도와 모서리 반경을 조정해 떠 있는 느낌을 완성하세요.
- 배경 씬을 바꿔 가독성을 테스트한 뒤 CSS 또는 Tailwind 코드를 복사하세요.
이 글래스모피즘 생성기에 대해
글래스모피즘은 패널이 반투명 유리처럼 보이는 UI 스타일입니다: 반투명 배경, 배경 블러, 은은한 밝은 테두리, 부드러운 섀도. 카드, 내비게이션 바, 모달의 주류 디자인 트렌드가 되었습니다. 핵심 요소는 backdrop-filter 속성으로, 요소 뒤에 있는 것에 효과를 적용합니다.
이 생성기는 틴트, 투명도, 블러, 채도, 테두리 하이라이트, 모서리 반경, 섀도를 세 가지 컬러풀 테스트 씬 위에서 조정해 효과를 현실적으로 판단할 수 있게 합니다. 출력에는 Safari용 -webkit-backdrop-filter 프리픽스가 포함됩니다. 접근성을 위해 유리 위 텍스트가 복잡한 배경에서도 충분한 대비를 유지하는지 항상 확인하세요.
글래스모피즘 자주 묻는 질문
backdrop-filter는 어떤 브라우저에서 지원되나요?
모든 최신 브라우저에서 지원됩니다. Chrome과 Edge는 프리픽스 없이 지원하고, Safari는 -webkit- 프리픽스가 필요하며 생성기가 자동으로 포함합니다. 아주 오래된 브라우저에서는 패널이 반투명 배경으로 폴백하며 그래도 괜찮은 모습을 유지합니다.
글래스 효과가 보이지 않는 이유는?
backdrop-filter는 요소 뒤에 무언가(배경 이미지, 그라디언트, 다른 콘텐츠)가 있을 때만 작동합니다. 평평한 단색 배경 위에 있으면 블러할 대상이 없습니다. 또한 패널 배경에 투명도(알파 100% 미만)가 있는지 확인하세요. 그렇지 않으면 배경이 완전히 가려집니다.
saturate() 함수는 무엇을 위한 것인가요?
saturate()는 블러 전에 배경의 색상을 강화(100% 초과)하거나 약화(100% 미만)합니다. 130~180% 정도의 값은 유리 뒤 색상을 생생하게 만들어 반투명 효과를 뚜렷하게 읽히게 합니다. 글래스모피즘 룩의 시그니처 요소입니다.
글래스모피즘은 접근성에 나쁜가요?
심하게 블러된 저대비 배경 위에 텍스트가 있으면 그럴 수 있습니다. 투명도를 적당히 유지하고, 테두리 하이라이트로 가장자리를 정의하고, 패널이 덮을 가장 복잡한 배경 위에서 테스트하세요. 내장된 세 가지 씬이 출시 전 대비 확인에 도움이 됩니다.
글래스모피즘을 Tailwind와 함께 쓸 수 있나요?
네. Tailwind 탭은 임의값 클래스(bg-[rgba(...)], backdrop-blur-[12px] 등)를 출력해 Tailwind CSS v3+에서 설정 없이 동작합니다.