Developer Design Utility
Glassmorphism 생성기
투명도, blur, 테두리, 그림자 값을 조절해 유리 느낌의 CSS glassmorphism 코드를 만들고 실시간으로 확인할 수 있습니다.
Glass UI 생성
backdrop-filter 기반 유리 효과 생성
실시간 미리보기
투명도, blur, border 값을 즉시 반영
CSS 코드 복사
완성된 glassmorphism CSS 복사·저장
Glassmorphism 설정
배경색, 투명도, blur, 테두리와 그림자를 조절하세요.
유리 카드의 기본 배경색입니다.
0%
22%
100%
0px
18px
40px
100%
160%
220%
0%
34%
100%
0px
28px
60px
0%
18%
80%
16px
32px
64px
추천 프리셋
Preview
Glass UI
Glassmorphism Card
투명한 유리 질감과 블러 효과를 실시간으로 확인하세요.
Blur
18px
Opacity
22%
Radius
28px
생성 결과
아래 코드를 CSS 파일 또는 style 영역에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Glassmorphism이란?
Glassmorphism은 반투명 배경, blur, 은은한 테두리와 그림자를 조합해 유리 같은 질감을 표현하는 UI 스타일입니다. 카드, 모달, 배너, 대시보드 위젯 등에 자주 사용됩니다.
핵심 CSS 속성
background: 반투명 배경색backdrop-filter: 뒤쪽 배경을 흐리게 처리border: 유리 가장자리 표현box-shadow: 깊이감과 레이어 효과
주의사항
Glassmorphism은 배경이 단색일 때보다 그라데이션이나 이미지 배경 위에서 더 잘 보입니다. 텍스트 가독성을 위해 배경 투명도를 너무 낮게 설정하지 않는 것이 좋습니다.