🧊 글래스모피즘 생성기

흐림(blur)·배경 투명도·채도·테두리를 슬라이더로 조절해 요즘 유행하는 반투명 유리 질감(글래스모피즘) UI를 만들어 줍니다. 컬러 배경 위에 얹은 실시간 미리보기를 보며 값을 맞추고, 그대로 붙여넣을 수 있는 CSS를 복사할 수 있습니다.

사용 방법

1. 흐림·배경 투명도·채도·모서리·테두리 슬라이더를 움직여 원하는 유리 질감을 만듭니다.
2. 유리 색상과 미리보기용 배경 색상을 색상 선택기로 조정합니다.
3. 컬러 배경 위 미리보기로 유리 효과가 잘 보이는지 확인합니다.
4. 완성된 CSS를 'CSS 복사'로 가져가 원하는 요소에 붙여넣습니다.

자주 묻는 질문

backdrop-filter가 적용이 안 돼요.

backdrop-filter는 요소 '뒤'에 배경(다른 색·이미지)이 있어야 흐림 효과가 보입니다. 배경이 없는 흰 화면 위에서는 변화가 거의 없어 보입니다. 사파리 대응을 위해 -webkit-backdrop-filter도 함께 넣어 두었습니다.

미리보기의 보라색 배경도 같이 복사되나요?

아니요. 배경 색상은 유리 효과 확인을 돕는 미리보기 전용이며, 복사되는 CSS에는 유리 요소 스타일만 포함됩니다.

모든 브라우저에서 똑같이 보이나요?

최신 크롬·엣지·사파리·파이어폭스에서 잘 동작하지만, backdrop-filter 지원 여부와 렌더링은 브라우저·기기마다 조금씩 다를 수 있어 참고용으로 확인 후 적용하세요. 모든 계산은 서버 전송 없이 브라우저 안에서만 처리됩니다.