🧊 글래스모피즘 CSS 생성기
컬러 배경 위에서 유리 카드의 블러·투명도를 조절하며 완성된 CSS를 복사할 수 있습니다.
사용 방법
- 블러 강도와 유리 불투명도를 슬라이더로 조절합니다.
- 채도 부스트·테두리 불투명도·모서리 둥글기를 취향대로 맞춥니다.
- 미리보기에서 유리 질감을 확인하고 'CSS 복사'를 누릅니다.
이럴 때 유용해요
- 로그인 카드·프로필 카드에 트렌디한 유리 질감을 입힐 때
- 사진 배경 위에 떠 있는 반투명 패널 UI를 만들 때
- 포트폴리오·랜딩페이지의 히어로 카드를 꾸밀 때
알아두면 좋은 팁
- 글래스모피즘은 뒤 배경이 화려할수록 효과가 삽니다. 단색 배경 위에서는 그냥 반투명 박스로만 보입니다.
- 유리 위 텍스트는 흐린 배경 때문에 대비가 떨어지기 쉬우니 흰 글자 + 얇은 텍스트 그림자를 함께 쓰세요.
- backdrop-filter의 saturate()를 함께 넣으면 유리 너머 색이 진해져 진짜 유리 같은 느낌이 강해집니다.
자주 묻는 질문
backdrop-filter가 적용이 안 돼요.
요소 자체가 아니라 '뒤에 비치는 배경'이 있어야 작동합니다. 배경이 단색이거나 요소 뒤에 아무것도 없으면 변화가 안 보입니다. 또 사파리는 -webkit-backdrop-filter 접두사가 필요한데, 이 도구가 만드는 코드에는 포함되어 있습니다.
지원 브라우저는 어떻게 되나요?
크롬 76+, 엣지 79+, 사파리 9+(접두사), 파이어폭스 103+ 에서 지원됩니다. 미지원 환경 대비로 background의 알파값을 조금 높여 두면 블러 없이도 내용을 읽을 수 있습니다.
유리 불투명도는 얼마가 적당한가요?
흰색 유리 기준 10~25%가 일반적입니다. 너무 낮으면 카드 경계가 사라지고, 40%를 넘으면 유리라기보다 반투명 종이처럼 보입니다. 배경 복잡도에 따라 미리보기로 조절하세요.
모바일에서 성능 문제는 없나요?
backdrop-filter의 블러는 GPU 연산이 큰 편이라 스크롤 영역 안에 유리 카드가 수십 개면 저사양 기기에서 버벅일 수 있습니다. 카드 수를 제한하거나 블러 값을 10px 내외로 낮추는 것이 안전합니다.
