Glass

Glassmorphism 플레이그라운드. backdrop-filter 속성을 실시간으로 조정하며 반투명 유리 효과를 탐구한다.

glass card

Frosted Interface

backdrop-filter blurs and desaturates everything behind this surface, creating the illusion of frosted glass.

parameters

blur16px

opacity18%

border opacity25%

saturation160%

live css

.glass-card {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
}

이 실험에 대해

backdrop-filter는 요소 뒤의 영역에 그래픽 효과를 적용하는 CSS 속성이다. blur()로 배경을 흐리게 하고 saturate()로 채도를 높이면, 배경이 비쳐 보이는 반투명 유리 효과가 만들어진다. 반드시 배경이 투명한 요소에 적용해야 효과가 보인다.

핵심 코드

/* backdrop-filter: 요소 뒤 영역에 필터 적용 */
backdrop-filter: blur(16px) saturate(160%);

/* 배경은 반투명으로 — 완전 불투명하면 효과가 보이지 않음 */
background-color: rgba(255, 255, 255, 0.18);

/* 섬세한 테두리가 유리 질감을 완성 */
border: 1px solid rgba(255, 255, 255, 0.25);