backdrop-filter 뒤쪽 배경을 흐리게 처리
Developer Design Utility
Glassmorphism 생성기
투명도, backdrop blur, 테두리, radius, 그림자 값을 조절해 유리 질감의 Glassmorphism CSS 코드를 만들고 실시간 미리보기로 확인할 수 있습니다.
Glass UI 생성
반투명 배경과 blur 효과를 조합해 유리 질감의 UI 카드를 만들 수 있습니다.
실시간 미리보기
Opacity, Blur, Border, Radius, Shadow 값이 Preview Card에 즉시 반영됩니다.
CSS 코드 복사
완성된 glassmorphism CSS를 복사하거나 CSS 파일로 다운로드할 수 있습니다.
Blur
18px
Opacity
22%
Border
34%
Radius
28px
STEP 1
Glassmorphism 설정
배경색, 투명도, blur, saturation, 테두리와 그림자 값을 조절해 원하는 유리 질감을 만들어보세요.
유리 카드의 기본 배경색입니다. 흰색은 기본 Glass UI, 컬러는 강조 카드에 적합합니다.
0%
22%
100%
0px
18px
40px
100%
160%
220%
0%
34%
100%
0px
28px
60px
0%
18%
80%
16px
32px
64px
Live Preview
Glass UI
Glassmorphism Card
투명한 유리 질감과 블러 효과를 실시간으로 확인하세요.
Blur
18px
Opacity
22%
Radius
28px
STEP 2
추천 프리셋
카드, 배너, 모달, 다크 배경 UI에 자주 사용하는 glassmorphism 조합을 빠르게 적용할 수 있습니다.
기본 Glass UI
컬러 Glass UI
특수 스타일
STEP 3
대기 중
생성 결과
아래 코드를 CSS 파일, 컴포넌트 스타일 또는 inline style에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Glassmorphism이란?
Glassmorphism은 반투명 배경, blur, 은은한 테두리와 그림자를 조합해 유리 같은 질감을 표현하는 UI 스타일입니다. 카드, 모달, 배너, 대시보드 위젯, 프로필 박스 등에 자주 사용됩니다.
사용 방법
- Glass Color, Background Opacity, Backdrop Blur와 Saturation을 조절합니다.
- Border Opacity, Radius, Shadow, Padding 값을 조정해 카드의 깊이와 형태를 맞춥니다.
- 미리보기에서 배경 위 유리 질감과 텍스트 가독성을 확인합니다.
- CSS 코드 생성하기 버튼으로 결과를 만들고 복사하거나 CSS 파일로 다운로드합니다.
유리 효과가 잘 보이지 않을 때는 어떻게 해야 하나요?
뒤쪽 배경에 그라데이션이나 이미지처럼 색상 차이가 있는 요소를 배치하면 blur 효과가 더 잘 보입니다. Blur 값을 높이고 Border Opacity를 조금 올리는 것도 도움이 됩니다.
텍스트 가독성이 낮아질 때는 어떻게 조절하나요?
Background Opacity를 높이거나 텍스트 색상을 더 진하게 설정하세요. 너무 투명한 유리 카드는 예쁘지만 실제 UI에서는 가독성이 떨어질 수 있습니다.
모든 브라우저에서 backdrop-filter가 작동하나요?
최신 브라우저에서는 대부분 지원되지만, 일부 환경에서는 제한될 수 있습니다. 그래서 -webkit-backdrop-filter를 함께 작성하는 것이 좋습니다.