글래스모피즘 CSS 생성기

글래스모피즘은 frosted glass(서리 낀 유리) 효과를 웹에 구현하는 디자인 트렌드입니다. macOS Big Sur와 iOS 이후 폭발적으로 인기를 얻었습니다.

글래스모피즘의 핵심 요소

• 반투명 배경: rgba(255, 255, 255, 0.1~0.3)
• backdrop-filter: blur(): 배경 흐리게 처리
• 테두리: 흰색 반투명 테두리
• 섀도우: 은은한 그림자

기본 CSS 코드

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

글래스모피즘 사용 팁

• 그라데이션이 있는 배경 위에서 가장 효과적
• 너무 많이 사용하면 무거워 보임
• 다크 모드에서는 어두운 반투명 사용
• backdrop-filter 성능 주의 (모바일에서 느릴 수 있음)