win-j 로고
자유로운 블로그

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 스타일입니다. 카드, 모달, 배너, 대시보드 위젯, 프로필 박스 등에 자주 사용됩니다.

사용 방법

  1. Glass Color, Background Opacity, Backdrop Blur와 Saturation을 조절합니다.
  2. Border Opacity, Radius, Shadow, Padding 값을 조정해 카드의 깊이와 형태를 맞춥니다.
  3. 미리보기에서 배경 위 유리 질감과 텍스트 가독성을 확인합니다.
  4. CSS 코드 생성하기 버튼으로 결과를 만들고 복사하거나 CSS 파일로 다운로드합니다.
핵심 CSS 속성 backdrop-filter 뒤쪽 배경을 흐리게 처리
추천 사용값 일반 Glass 카드: Opacity 16%~28%, Blur 14px~24px
주의사항 Glassmorphism은 단색 배경보다 그라데이션, 이미지, 패턴 배경 위에서 더 잘 보입니다. 다만 텍스트 가독성을 위해 배경 투명도를 너무 낮게 설정하지 않는 것이 좋습니다.
유리 효과가 잘 보이지 않을 때는 어떻게 해야 하나요?

뒤쪽 배경에 그라데이션이나 이미지처럼 색상 차이가 있는 요소를 배치하면 blur 효과가 더 잘 보입니다. Blur 값을 높이고 Border Opacity를 조금 올리는 것도 도움이 됩니다.

텍스트 가독성이 낮아질 때는 어떻게 조절하나요?

Background Opacity를 높이거나 텍스트 색상을 더 진하게 설정하세요. 너무 투명한 유리 카드는 예쁘지만 실제 UI에서는 가독성이 떨어질 수 있습니다.

모든 브라우저에서 backdrop-filter가 작동하나요?

최신 브라우저에서는 대부분 지원되지만, 일부 환경에서는 제한될 수 있습니다. 생성 코드는 -webkit 접두사와 불투명도를 높인 @supports 대체 배경을 함께 제공합니다.

EDITORIAL GUIDE

Glassmorphism을 브라우저 대체 배경과 가독성까지 고려해 적용하는 법

Glassmorphism은 반투명 배경 뒤의 장면을 흐리게 해 유리 같은 표면을 만드는 표현입니다. backdrop-filter 지원 여부, 뒤쪽 배경의 복잡도와 텍스트 대비에 따라 가독성이 크게 달라지므로 불투명 대체 배경을 함께 준비해야 합니다.

작성 · 검토
win-j
최종 검토
2026년 8월 8일

이런 분께 유용합니다

  • 반투명 카드 UI를 만드는 디자이너
  • backdrop-filter 대체 처리를 준비하는 개발자
  • 시각 효과와 가독성을 함께 검토하는 운영자

대표 활용 상황

  • 히어로 이미지 위 정보 카드를 만들 때
  • 모달·내비게이션에 반투명 표면을 적용할 때
  • 블러·불투명도·테두리·그림자 조합을 비교할 때

처음부터 결과 확인까지

  1. 1

    실제 페이지와 비슷한 배경 위에서 패널 색을 선택합니다.

  2. 2

    패널 불투명도를 먼저 높게 시작한 뒤 뒤쪽 맥락이 보일 정도로만 낮춥니다.

  3. 3

    블러 값을 조절해 뒤쪽 무늬가 글자 인식을 방해하지 않는지 확인합니다.

  4. 4

    테두리, 모서리와 그림자는 표면의 경계를 구분할 만큼만 적용합니다.

  5. 5

    생성 코드의 backdrop-filter와 -webkit-backdrop-filter를 함께 적용합니다.

  6. 6

    필터 미지원 대체 배경과 저전력 기기, 밝고 어두운 배경에서 텍스트 대비를 확인합니다.

실제 예시 1

사진 위 정보 카드

입력
흰색 22%, blur 16px, 1px 밝은 테두리
결과
배경 맥락이 은은하게 비치는 밝은 패널

사진의 밝기가 위치마다 달라 글자 뒤 영역 전체의 대비를 확인해야 합니다.

실제 예시 2

필터 미지원 환경

입력
동일한 카드와 @supports 대체 규칙
결과
더 불투명한 단색 배경

블러 없이도 콘텐츠를 읽을 수 있도록 생성 코드가 대체 배경을 제공합니다.

계산·처리 기준

선택한 HEX 색을 RGBA로 바꾸고 불투명도, backdrop-filter blur, 반투명 테두리, border-radius와 box-shadow를 조합합니다. backdrop-filter 또는 접두사 속성을 지원하지 않는 환경에는 더 불투명한 배경을 적용하는 @supports not 규칙을 함께 생성합니다.

알아둘 한계

  • 뒤쪽 배경이 단색이면 블러 효과가 거의 보이지 않을 수 있습니다.
  • 큰 블러 영역과 움직이는 배경은 렌더링 비용과 배터리 사용을 늘릴 수 있습니다.
  • backdrop-filter의 지원과 합성 결과는 브라우저·기기에 따라 다를 수 있습니다.
  • 실제 배경 전체에 대한 텍스트 대비와 강제 색상 모드를 자동으로 검증하지 않습니다.
개인정보 처리

모든 CSS 값과 미리보기는 브라우저에서 처리하며 입력한 색상이나 설정을 서버로 전송하지 않습니다.

함께 쓰면 좋은 도구

자주 묻는 질문

backdrop-filter와 filter는 같은가요?

아닙니다. backdrop-filter는 요소 뒤에 비치는 영역에 효과를 적용하고 filter는 요소 자체의 렌더링에 적용됩니다.

왜 더 불투명한 대체 배경이 필요한가요?

블러를 지원하지 않는 브라우저에서도 뒤쪽 무늬와 글자가 겹쳐 읽기 어려워지지 않도록 하기 위해서입니다.

불투명도가 낮을수록 더 좋은 효과인가요?

아닙니다. 뒤쪽 배경이 복잡할수록 가독성이 빠르게 떨어지므로 콘텐츠를 읽을 수 있는 범위에서 조절해야 합니다.