글래스모피즘 CSS 생성기
흐림, 투명도, 틴트 색상, 모서리 둥글기, 테두리 슬라이더로 실시간 미리보기를 보며 프로스티드 글라스(글래스모피즘) 카드를 만들고 CSS를 복사하세요 — 100% 브라우저에서 실행되며 업로드되지 않습니다.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18);
🔒 브라우저에서 생성되며 업로드되지 않습니다.
이 글래스모피즘 생성기가 하는 일
글래스모피즘은 반투명 틴트 배경을 backdrop-filter: blur() 위에 겹치고, 보통 둥근 모서리와 은은한 밝은 테두리로 마무리한 서리 낀 유리 느낌의 스타일입니다. 슬라이더를 움직여 픽셀 단위의 흐림 반경, 배경 투명도, 모서리 둥글기를 설정하고 틴트 색상을 고르면, 컬러 그라데이션 위에 놓인 미리보기 패널에서 서리 효과를 실시간으로 확인할 수 있습니다. 그런 다음 바로 붙여넣을 수 있는 CSS 블록을 한 번의 클릭으로 복사할 수 있습니다.
바로 붙여넣는 크로스 브라우저 출력
생성된 코드는 선택한 색상과 투명도로 만든 rgba() 배경, backdrop-filter: blur(Npx), 그리고 사파리와 구형 WebKit 브라우저에서도 동작하도록 -webkit-backdrop-filter를 함께 출력합니다. 모서리 둥글기는 border-radius로 나오며, 선택적인 1px 밝은 테두리가 은은한 유리 가장자리를 더합니다. 이 블록을 스타일시트의 클래스나 인라인 style 속성에 그대로 붙여넣으면 됩니다.
자주 묻는 질문
왜 출력에 -webkit-backdrop-filter 줄이 포함되나요?
사파리와 일부 구형 WebKit 기반 브라우저는 접두사가 붙은 -webkit-backdrop-filter 속성만 인식합니다. 그래서 표준 속성과 접두사 속성을 모두 출력해 어느 브라우저에서든 흐림이 일관되게 표시됩니다.
밋밋한 배경에서는 왜 유리 효과가 안 보이나요?
backdrop-filter는 요소 뒤에 있는 것을 흐리게 하므로, 유리 패널 뒤에 이미지·그라데이션·겹친 요소 같은 콘텐츠가 있을 때만 서리 효과가 보입니다. 단색 배경 위에서는 흐리게 할 대상이 없습니다.
만든 내용이 서버로 업로드되나요?
아니요. 미리보기와 CSS는 모두 브라우저 안에서 자바스크립트로 생성됩니다. 입력한 어떤 내용도 전송·저장·업로드되지 않습니다.