이런 분께 유용합니다
- 반투명 카드 UI를 만드는 디자이너
- 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은 반투명 배경 뒤의 장면을 흐리게 해 유리 같은 표면을 만드는 표현입니다. backdrop-filter 지원 여부, 뒤쪽 배경의 복잡도와 텍스트 대비에 따라 가독성이 크게 달라지므로 불투명 대체 배경을 함께 준비해야 합니다.
대표 활용 상황
- 히어로 이미지 위 정보 카드를 만들 때
- 모달·내비게이션에 반투명 표면을 적용할 때
- 블러·불투명도·테두리·그림자 조합을 비교할 때
처음부터 결과 확인까지
- 1
실제 페이지와 비슷한 배경 위에서 패널 색을 선택합니다.
- 2
패널 불투명도를 먼저 높게 시작한 뒤 뒤쪽 맥락이 보일 정도로만 낮춥니다.
- 3
블러 값을 조절해 뒤쪽 무늬가 글자 인식을 방해하지 않는지 확인합니다.
- 4
테두리, 모서리와 그림자는 표면의 경계를 구분할 만큼만 적용합니다.
- 5
생성 코드의 backdrop-filter와 -webkit-backdrop-filter를 함께 적용합니다.
- 6
필터 미지원 대체 배경과 저전력 기기, 밝고 어두운 배경에서 텍스트 대비를 확인합니다.
사진 위 정보 카드
- 입력
- 흰색 22%, blur 16px, 1px 밝은 테두리
- 결과
- 배경 맥락이 은은하게 비치는 밝은 패널
사진의 밝기가 위치마다 달라 글자 뒤 영역 전체의 대비를 확인해야 합니다.
필터 미지원 환경
- 입력
- 동일한 카드와 @supports 대체 규칙
- 결과
- 더 불투명한 단색 배경
블러 없이도 콘텐츠를 읽을 수 있도록 생성 코드가 대체 배경을 제공합니다.
계산·처리 기준
HEX를 RGBA로 바꾸고 불투명도, blur·saturate, 테두리, 모서리, 그림자와 패딩을 조합합니다. backdrop-filter와 WebKit 접두사 속성을 출력하고, 두 속성을 모두 지원하지 않을 때 더 불투명한 배경을 쓰는 @supports not 규칙을 함께 만듭니다.
알아둘 한계
- 뒤쪽 배경이 단색이면 블러 효과가 거의 보이지 않을 수 있습니다.
- 큰 블러 영역과 움직이는 배경은 렌더링 비용과 배터리 사용을 늘릴 수 있습니다.
- backdrop-filter의 지원과 합성 결과는 브라우저·기기에 따라 다를 수 있습니다.
- 실제 배경 전체에 대한 텍스트 대비와 강제 색상 모드를 자동으로 검증하지 않습니다.
개인정보 처리
모든 CSS 값과 미리보기는 브라우저에서 처리하며 입력한 색상이나 설정을 서버로 전송하지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- 색상 대비 검사기
패널의 대표 배경색과 글자색 대비를 계산합니다.
- Box Shadow 생성기
패널 경계를 구분할 그림자 값을 더 세밀하게 조절합니다.
자주 묻는 질문
backdrop-filter와 filter는 같은가요?
아닙니다. backdrop-filter는 요소 뒤에 비치는 영역에 효과를 적용하고 filter는 요소 자체의 렌더링에 적용됩니다.
왜 더 불투명한 대체 배경이 필요한가요?
블러를 지원하지 않는 브라우저에서도 뒤쪽 무늬와 글자가 겹쳐 읽기 어려워지지 않도록 하기 위해서입니다.
불투명도가 낮을수록 더 좋은 효과인가요?
아닙니다. 뒤쪽 배경이 복잡할수록 가독성이 빠르게 떨어지므로 콘텐츠를 읽을 수 있는 범위에서 조절해야 합니다.