🫙 글래스모피즘 CSS 생성기 | 수치 넣고 코드 복사

유리판 색 (HEX)

유리판 불투명도

블러 반경

채도 (saturate)

테두리 두께

테두리 색 (HEX)

테두리 불투명도

모서리 반경

그림자 세로 오프셋

그림자 흐림

그림자 불투명도

붙여 쓸 CSS (접두사 병기)

글래스모피즘 CSS를 수치로 만드는 방법

글래스모피즘은 반투명한 판 뒤쪽 화면을 흐리게 비추어 서리 낀 유리 같은 질감을 만드는 표현입니다. 이 생성기는 유리판 색과 불투명도, 블러 반경, 채도, 테두리, 모서리 반경, 그림자 값을 직접 넣으면 그대로 붙여 쓸 수 있는 CSS 선언 묶음을 만들어 줍니다. 미리보기 카드가 입력과 동시에 바뀌므로 수치를 조금씩 옮기며 원하는 투명도를 찾을 수 있습니다.

불투명도 입력은 0~100%를 0~1 범위 알파값으로 바꿔 rgba() 함수에 넣고, 흐림과 채도는 W3C Filter Effects 규격의 backdrop-filter 속성으로 묶어 출력합니다. 사파리 계열 엔진은 접두사가 붙은 -webkit-backdrop-filter 를 함께 써야 적용되므로 두 줄을 항상 나란히 내보냅니다. 2026년 10월 기준 표기이며 지원 범위는 바뀔 수 있습니다.

글래스모피즘에는 정답 수치가 없어 권장값을 제시하지 않고 모든 값을 입력으로 받습니다. 뒤 배경이 단색이면 흐림이 보이지 않고, 조상 요소에 overflow 나 filter 가 걸려 있으면 합성이 끊길 수 있습니다. 그라디언트 자체를 만드는 기능은 지원하지 않습니다. 생성된 코드는 참고용 출발점이므로 실제 기기에서 확인하세요.

자주 묻는 질문

왜 -webkit- 접두사를 같이 내보내나요?

사파리와 iOS 웹뷰는 접두사 없는 backdrop-filter 를 인식하지 못하는 경우가 있습니다. 두 줄을 함께 두면 어느 쪽 엔진에서도 적용됩니다.

블러를 키웠는데 화면이 그대로입니다.

backdrop-filter 는 요소 뒤쪽에 비칠 내용이 있어야 작동합니다. 배경이 단색이거나 뒤에 아무 것도 없으면 차이가 보이지 않습니다.

권장 수치를 알려주지 않는 이유가 뭔가요?

유리 질감의 적정 값은 뒤에 깔린 배경의 밝기와 대비에 따라 크게 달라집니다. 공인된 기준표가 없으므로 이 도구는 입력한 값만 그대로 코드로 옮깁니다.

🫙CSS 글래스모피즘 효과 코드 생성기

관련된 도구

CSS backdrop-filter 코드 생성기

CSS 다중 배경 레이어 코드 생성기

글래스모피즘 CSS를 수치로 만드는 방법

자주 묻는 질문

관련된 도구

CSS backdrop-filter 코드 생성기

CSS 다중 배경 레이어 코드 생성기

글래스모피즘 CSS를 수치로 만드는 방법

자주 묻는 질문

같은 카테고리 도구