글래스모피즘 CSS 생성기
흐림·채도·투명도·틴트 색상·모서리 둥글기·그림자 슬라이더로 프로스티드 글라스(글래스모피즘) 카드를 만들고, 선언부만 또는 .glass-card 클래스 규칙 전체로 복사하세요. 브라우저에서 처리됩니다.
배경은 미리보기용 무대이고, 아래 CSS는 유리판 자체입니다.
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); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
🔒 브라우저에서 생성되며 업로드되지 않습니다.
이 글래스모피즘 생성기가 하는 일
글래스모피즘은 반투명 틴트 배경을 backdrop-filter: blur() 위에 겹치고, 보통 둥근 모서리와 은은한 밝은 테두리, 부드러운 그림자로 마무리한 서리 낀 유리 느낌의 스타일입니다. 슬라이더로 픽셀 단위의 흐림 반경, 배경 채도, 배경 투명도, 모서리 둥글기, 그림자 깊이를 설정하고 틴트 색상을 고르면, 컬러 무대 위에 놓인 미리보기 패널에서 실시간으로 확인할 수 있습니다. 무대는 다른 그라데이션이나 단순한 원으로 이뤄진 배경으로 바꿀 수 있어, 매끄러운 그라데이션 대신 뚜렷한 경계가 흐려지는 모습을 볼 수 있습니다. 유리 색을 무작위로 바꾸거나 모든 슬라이더를 한 번에 초기화할 수 있고, 유리 위의 글자가 거슬리면 끌 수 있습니다.
미리보기가 곧 출력입니다
패널에는 어떤 스타일도 두 번 적용되지 않습니다. 미리보기 아래에 인쇄된 그 CSS가 바로 패널을 그리는 규칙이므로, 화면에 반영된 값은 언제나 복사한 코드에도 들어 있습니다. 생성된 코드는 선택한 색상과 투명도로 만든 rgba() 배경, 필요하면 saturate()가 붙은 backdrop-filter: blur(Npx), 그리고 사파리와 구형 WebKit 브라우저를 위한 -webkit-backdrop-filter를 함께 출력합니다. 모서리 둥글기는 border-radius, 선택적인 1px 밝은 테두리는 유리 가장자리, 그림자는 box-shadow로 나오며 가장자리 하이라이트를 켜면 inset 레이어가 한 겹 더 붙습니다. 이 블록을 스타일시트의 클래스나 인라인 style 속성에 그대로 붙여넣어도 되고, 출력을 완전한 .glass-card 클래스 규칙으로 바꾸면 패널의 너비·높이와 선언부만으로는 표현할 수 없는 ::after 광택까지 함께 받습니다.
자주 묻는 질문
왜 출력에 -webkit-backdrop-filter 줄이 포함되나요?
사파리와 일부 구형 WebKit 기반 브라우저는 접두사가 붙은 -webkit-backdrop-filter 속성만 인식합니다. 그래서 표준 속성과 접두사 속성을 모두 출력해 어느 브라우저에서든 흐림이 일관되게 표시됩니다.
밋밋한 배경에서는 왜 유리 효과가 안 보이나요?
backdrop-filter는 요소 뒤에 있는 것을 흐리게 하므로, 유리 패널 뒤에 이미지·그라데이션·겹친 요소 같은 콘텐츠가 있을 때만 서리 효과가 보입니다. 단색 배경 위에서는 흐리게 할 대상이 없습니다. 미리보기 뒤의 무대가 바로 그 콘텐츠 역할을 하며, 무대는 미리보기 전용이라 복사하는 CSS에는 절대 포함되지 않습니다.
미리보기에만 있고 CSS에는 빠지는 게 있나요?
없습니다. 그게 이 도구의 핵심입니다. 미리보기 아래의 블록이 그대로 패널을 그리는 규칙으로 주입되므로, 지금 보고 있는 그림자·가장자리 하이라이트·모서리·흐림은 복사하는 선언과 완전히 같습니다. 미리보기가 따로 얹는 것은 글자의 위치와 색뿐입니다.
선언부와 클래스 규칙 중 언제 무엇을 쓰나요?
이미 있는 클래스나 인라인 style 속성에 붙여넣을 때는 선언부가 편합니다. 컴포넌트 전체가 필요하면 .glass-card 클래스 규칙으로 바꾸세요 — 패널의 너비·높이와 함께, 굴절 광택을 그리는 .glass-card::after 의사 요소까지 나옵니다. 선언 목록만으로는 의사 요소를 표현할 방법이 없습니다.
만든 내용이 서버로 업로드되나요?
아니요. 미리보기와 CSS는 모두 브라우저 안에서 자바스크립트로 생성됩니다. 입력한 어떤 내용도 전송·저장·업로드되지 않습니다.