Developer Design Utility
Glassmorphism 생성기
투명도, backdrop blur, 테두리, radius, 그림자 값을 조절해 유리 질감의 Glassmorphism CSS 코드를 만들고 실시간 미리보기로 확인할 수 있습니다.
Glassmorphism 설정
배경색, 투명도, blur, saturation, 테두리와 그림자 값을 조절해 원하는 유리 질감을 만들어보세요.
유리 카드의 기본 배경색입니다. 흰색은 기본 Glass UI, 컬러는 강조 카드에 적합합니다.
투명한 유리 질감과 블러 효과를 실시간으로 확인하세요.
추천 프리셋
카드, 배너, 모달, 다크 배경 UI에 자주 사용하는 glassmorphism 조합을 빠르게 적용할 수 있습니다.
기본 Glass UI
컬러 Glass UI
특수 스타일
생성 결과
아래 코드를 CSS 파일, 컴포넌트 스타일 또는 inline style에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Glassmorphism이란?
Glassmorphism은 반투명 배경, blur, 은은한 테두리와 그림자를 조합해 유리 같은 질감을 표현하는 UI 스타일입니다. 카드, 모달, 배너, 대시보드 위젯, 프로필 박스 등에 자주 사용됩니다.
핵심 CSS 속성
background: 반투명 배경색backdrop-filter: 뒤쪽 배경을 흐리게 처리border: 유리 가장자리 표현box-shadow: 깊이감과 레이어 효과
추천 사용값
- 일반 Glass 카드: Opacity 16%~28%, Blur 14px~24px
- Frosted Glass: Opacity 8%~16%, Blur 24px 이상
- 다크 배경 카드: Opacity 20%~35%, Border Opacity 15%~30%
- 컬러 Glass: 포인트 컬러와 낮은 투명도 조합
주의사항
Glassmorphism은 단색 배경보다 그라데이션, 이미지, 패턴 배경 위에서 더 잘 보입니다. 다만 텍스트 가독성을 위해 배경 투명도를 너무 낮게 설정하지 않는 것이 좋습니다.
유리 효과가 잘 보이지 않을 때는 어떻게 해야 하나요?
뒤쪽 배경에 그라데이션이나 이미지처럼 색상 차이가 있는 요소를 배치하면 blur 효과가 더 잘 보입니다. Blur 값을 높이고 Border Opacity를 조금 올리는 것도 도움이 됩니다.
텍스트 가독성이 낮아질 때는 어떻게 조절하나요?
Background Opacity를 높이거나 텍스트 색상을 더 진하게 설정하세요. 너무 투명한 유리 카드는 예쁘지만 실제 UI에서는 가독성이 떨어질 수 있습니다.
모든 브라우저에서 backdrop-filter가 작동하나요?
최신 브라우저에서는 대부분 지원되지만, 일부 환경에서는 제한될 수 있습니다. 그래서 -webkit-backdrop-filter를 함께 작성하는 것이 좋습니다.