글래스모피즘 CSS 생성기 — 프로스트 글래스
블러·투명도·채도·테두리·반경 슬라이더로 프로스트 글래스(글래스모피즘) 카드를 만드세요. 실시간 미리보기와 CSS. 브라우저에서.
🔒 모두 브라우저 안에서 동작합니다. 입력과 출력은 서버로 전송되거나 저장되지 않아 안전합니다.
이 도구 소개
이 글래스모피즘 생성기는 요즘 앱과 웹 디자인에서 볼 수 있는 서리 낀 유리 같은 느낌을 만들어 주고, 복사할 수 있는 CSS를 건네줍니다. 흐림·투명도·배경 색조·테두리·모서리 둥글기를 조정하면 실시간 패널이 알록달록한 배경 위에 떠 있는 효과를 보여 주어 가독성을 가늠할 수 있습니다. 내부적으로는 요소 뒤에 있는 것을 흐리게 하기 위해 backdrop-filter를 사용합니다. 패널이 마음에 들면 생성된 규칙을 스타일시트에 복사하세요 — 그리고 모든 것이 브라우저에서 작동합니다.
자주 묻는 질문
서리 낀 유리 효과는 실제로 어떻게 작동하나요?
이 효과는 세 가지 재료를 겹칩니다. 색이 약간 비치도록 하는 반투명 배경, 패널 뒤에 있는 것을 서리처럼 흐리는 backdrop-filter 흐림, 그리고 진짜 유리처럼 가장자리를 살리는 은은하고 밝은 테두리입니다. 핵심은 흐림으로, 패널 자체의 글자가 아니라 그 아래에 있는 콘텐츠를 부드럽게 합니다. 효과가 뒤에 있는 것을 가져오기 때문에, 글래스모피즘은 단색보다 알록달록하거나 사진이 있는 배경 위에 떠 있을 때 가장 돋보입니다.
backdrop-filter는 모든 브라우저에서 작동하나요?
backdrop-filter는 모든 주요 브라우저의 현재 버전에서 지원되지만 몇 가지 유의점이 있습니다. Safari는 -webkit-backdrop-filter 접두사가 필요한데, 이는 생성기가 대신 넣어 줍니다. 또 일부 오래된 브라우저는 이 속성을 완전히 무시하며, 그럴 때 패널은 흐림 없이 순수한 반투명 배경만 보여 줍니다. 강한 흐림은 저사양 기기에서 성능에 부담을 줄 수도 있습니다. 서리 효과가 렌더링되지 않더라도 글자가 읽히도록 해 두면 디자인이 무리 없이 저하되어 안전합니다.
생성된 CSS는 바로 쓸 수 있나요? 도구는 로컬에서 작동하나요?
둘 다 그렇습니다. 이 도구는 배경·흐림·테두리·반지름을 담은 완전한 규칙 한 벌을 -webkit- 접두사까지 포함해 출력하므로, 스타일시트에 바로 붙여 넣어 어떤 패널이나 카드에도 적용할 수 있습니다. 슬라이더를 조정하는 동안 이 모든 것이 브라우저에서 로컬로 생성되므로 여러분의 디자인과 설정이 업로드되지 않으며, 페이지를 한 번 불러오면 오프라인에서도 미리보기가 계속 작동합니다.