글래스모피즘 생성기
글래스모피즘 CSS 효과 생성 및 미리보기.
유리모र्फ리즘
얼음 유리 효과, 모호함과 현대 인터페이스의 투명성
미묘한10px
투명성25%
국경1px
국경 반경16px
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.4);
CSS 글래스모피즘 효과 온라인 생성기
글래스모피즘(또는 유리 모피즘)은 서리낀 유리의 효과를 시뮬레이션하는 인터페이스 디자인 트렌드입니다. 배경 블러(backdrop-filter), 투명도, 미묘한 테두리를 결합하여 현대적이고 세련된 외관을 만듭니다.
우리 글래스모피즘 생성기를 사용하면 효과의 모든 매개변수를 시각적으로 조정할 수 있습니다: 블러 수준, 투명도, 배경색, 테두리, 모서리 반경.
생성된 CSS 코드에는 Safari 호환을 위한 -webkit- 접두사와 표준 backdrop-filter 속성이 모두 포함됩니다.
자주 묻는 질문
모든 브라우저와 호환되나요?
backdrop-filter 속성은 Chrome, Safari, Edge, Firefox(103 버전부터)와 호환됩니다. Safari의 경우 -webkit-backdrop-filter 접두사가 필요합니다. 우리 생성기는 자동으로 두 버전을 포함합니다.
글래스모피즘이 성능에 영향을 미치나요?
블러 효과는 GPU 리소스를 소비할 수 있으며, 특히 모바일 기기에서 높은 값일 때 그렇습니다. 최상의 성능을 위해 블러를 20px 이하로 유지하고 동시에 효과를 적용하는 요소 수를 제한하세요.
작동하려면 특별한 배경이 필요한가요?
네, 글래스모피즘은 블러 효과가 보이려면 요소 뒤에 콘텐츠(이미지, 그라디언트, 색상)가 필요합니다. 단색 배경에서는 효과가 눈에 띄지 않습니다.
더 알고 싶으신가요? 전체 가이드 읽기 →