Glassmorphism Generator

커스터마이징 가능한 blur, 투명도, 테두리로 frosted glass UI 효과를 만들어요. 생생한 배경에서 실시간 미리보기를 확인할 수 있어요.

작동 방식: blur, 투명도, 테두리 설정을 조절해 glass 효과를 만들어요. 미리보기에서 생생한 배경 위의 결과를 확인할 수 있어요. 준비되면 CSS를 복사해요.

Glass Card
This is a glassmorphism effect with customizable blur, opacity, and border properties.
배경
#ffffff
15%
12px
180%
테두리
1px
20%
16px
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);

Glassmorphism이란?

Glassmorphism은 CSS backdrop-filter를 사용해 frosted glass 효과를 만드는 UI 디자인 트렌드예요. 요소들이 반투명하게 표현되고 흐릿한 배경이 통과하며 깊이감과 시각적 계층을 만들어요. Apple의 macOS와 iOS 디자인으로 대중화된 이 방식은 투명도, blur, 섬세한 테두리를 조합해요.

Glassmorphism 효과 만드는 방법

핵심 속성은 frosted 효과를 위한 backdrop-filter: blur(), 색감 표현을 위한 반투명 background-color, 가장자리 정의를 위한 섬세한 border예요. blur 반경을 조절해 투명도를 더 크거나 작게 만들 수 있고, background saturation을 사용해 글래스를 통해 보이는 색상을 강조해요.

Glassmorphism 브라우저 지원

backdrop-filter 속성은 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원돼요. 구형 브라우저를 위해서는 fallback solid background color를 제공해요. @supports (backdrop-filter: blur(1px))를 사용해 조건부로 glass 효과를 적용할 수 있어요.

Glassmorphism 디자인 팁

  • 생생한 색상이나 gradient 배경에서 최고의 시각 효과를 누려요
  • 글래스 뒤 텍스트를 읽을 수 있게 blur는 8-20px 범위로 유지해요
  • 가장자리 정의를 위해 섬세한 하얀색 또는 밝은 테두리를 추가해요
  • 텍스트 대비가 WCAG 접근성 가이드라인을 충족하는지 확인해요
  • 서로 다른 투명도의 여러 glass panel을 겹쳐 깊이감을 만들어요
  • 섬세한 box-shadow와 조합해 추가 입체감을 표현해요