글래스모피즘 CSS. 유리 효과 카드. Apple·Frosted Glass UI 트렌드.
🪟 미리보기

🪟 Glass Card

유리 같은 부드러운 카드 디자인

사용법

  1. 블러·투명도 조정 (블러 12px·투명도 20%가 표준)
  2. 채도 100~300%로 강도 조정 (180% 권장)
  3. 모서리·테두리 조정
  4. 배경 그라데이션 선택 (5종)
  5. CSS 복사 후 사용

주요 기능

  • 블러 0~40px, 투명도 0~80% 자유 조정
  • 채도(saturate) 조정 — 글래스의 핵심
  • 5가지 배경 그라데이션 프리셋
  • 테두리·모서리 자유 조정
  • 실시간 미리보기 + CSS 코드 즉시 복사

활용 예시

  • 웹사이트 카드 UI — 부드러운 입체감
  • 모달·팝업 — 배경 비치는 효과
  • 대시보드 위젯 — 모던한 인상
  • 로그인 폼 — 그라데이션 배경에 띄우기
  • iOS 앱 UI — Apple 네이티브 디자인

글래스모피즘이란?

글래스모피즘(Glassmorphism)은 2020년 등장한 UI 트렌드로, 반투명 유리처럼 뒤가 비치는 효과를 표현합니다. macOS Big Sur(2020)·iOS의 컨트롤 센터·Windows 11 Mica에서 표준으로 채택되었습니다. 핵심 4요소는 (1) 반투명 배경(opacity 10~30%) (2) 블러(backdrop-filter:blur 8~16px) (3) 얇은 흰 테두리 (4) 부드러운 그림자 입니다.

자주 묻는 질문

backdrop-filter 브라우저 지원?

Chrome 76+, Firefox 103+, Safari 9+ (Safari는 -webkit- 접두사). 2026년 모든 모던 브라우저 지원.

왜 채도(saturate)를 높이나?

블러만 적용하면 색이 탁해집니다. saturate(180%) 로 채도를 높여 유리 같은 투명감을 살립니다.

접근성은 괜찮나?

텍스트 가독성에 주의. 어두운 배경엔 흰 글자, 밝은 배경엔 어두운 글자. 대비율 4.5:1 이상 권장.

무료인가요?

네.