모던 UI CSS 생성기

글래스모피즘(Glassmorphism)은 배경을 반투명하게 하고 흐림 효과(backdrop-filter: blur())를 주어 불투명한 유리 같은 질감을 표현하는 UI 디자인 트렌드입니다. Apple의 macOS/iOS나 Windows Fluent Design System에서 널리 채택되고 있습니다.

본 도구에서는 12종류의 프리셋에서 클릭 한 번으로 적용할 수 있으며, blur・brightness・saturate・contrast 등 4가지 backdrop-filter 함수를 개별적으로 조정할 수 있습니다. 테두리・그림자・둥근 모서리도 슬라이더로 미세 조정하여 CSS 또는 CSS 변수 형식으로 코드를 복사할 수 있습니다.

backdrop-filter: blur()

요소의 뒷배경을 흐리게 합니다. 값이 클수록 유리 효과가 강해집니다. 글래스모피즘의 핵심 속성입니다.

backdrop-filter: brightness()

배경의 밝기를 조정합니다. 100%가 기본값. 200%면 2배 밝게, 0%면 완전히 어두워집니다.

backdrop-filter: saturate()

배경의 채도를 조정합니다. 100%가 기본값. 0%면 흑백, 200%면 채도가 높은 선명한 색이 됩니다.

backdrop-filter: contrast()

배경의 대비를 조정합니다. 100%가 기본값. 값을 올리면 명암 차이가 강조됩니다.

벤더 프리픽스

Safari 지원을 위해 -webkit-backdrop-filter 를 병기하는 것을 권장합니다. 본 도구의 출력 코드에는 자동으로 포함됩니다.

Q.backdrop-filter는 모든 브라우저에서 사용할 수 있나요?

Chrome, Edge, Safari, Firefox 등 주요 브라우저의 최신 버전에서 지원됩니다. IE11은 미지원이며 반투명 배경색으로 최소한의 외형을 유지하는 대체 설계가 권장됩니다.

Q.뉴모피즘과 글래스모피즘의 차이는?

글래스모피즘은 backdrop-filter를 사용해 '불투명한 유리 느낌'을 주며 요소의 겹침(Z축)을 표현합니다. 뉴모피즘은 box-shadow의 명암으로 '요철'을 표현하는 스타일입니다.

Q.성능에 영향이 있나요?

backdrop-filter는 GPU 합성을 이용하므로 적절하게 사용하면 문제 없습니다. 단, 페이지 전체에 높은 blur 값을 적용하면 프레임 속도가 저하될 수 있습니다.

Q.생성된 코드를 그대로 쓸 수 있나요?

네, 복사한 CSS를 스타일시트에 붙여넣기만 하면 적용됩니다. 클래스 이름은 임의로 변경하세요.