Glassmorphism CSS 생성기

사용 방법

1. 배경 색상을 선택하고 배경 투명도를 설정합니다 (보통 10–25%).
2. 블러를 높여서 (10–20px 권장) frosted-glass 효과를 만듭니다.
3. 채도로 유리 뒤에 보이는 색상의 선명도를 조정합니다.
4. 테두리 색상, 테두리 투명도, 테두리 너비를 설정합니다 — 얇고 반투명한 테두리가 유리 가장자리를 정의합니다.
5. 모서리 반경으로 카드 모서리를 둥글게 합니다 (12–20px가 일반적).
6. 부드러운 그림자를 추가하여 카드를 배경에서 들어올립니다.
7. 배경 프리셋 (선셋, 오션, 포레스트, 나이트, 오로라)을 전환하여 다양한 배경에서 효과를 테스트합니다.
8. 복사를 클릭하여 생성된 CSS를 클립보드에 복사합니다.

CSS 출력 참조

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
}

일반적인 글래스모피즘 프리셋

• 밝은 유리 (흰색): background rgba(255,255,255,0.15), blur 12px, border rgba(255,255,255,0.3)
• 어두운 유리: background rgba(0,0,0,0.25), blur 16px, border rgba(255,255,255,0.1)
• 강한 frosted: background rgba(255,255,255,0.25), blur 20px, saturation 200%
• 미니멀: background rgba(255,255,255,0.08), blur 8px, 테두리 없음

브라우저 지원 안내

backdrop-filter는 모든 주요 브라우저에서 지원됩니다 (Chrome 76+, Firefox 103+, Safari 9+, Edge 79+). 항상 backdrop-filter와 -webkit-backdrop-filter를 함께 포함하세요. 미지원 브라우저를 위해 반투명 단색 배경을 폴백으로 고려하세요.

관련 도구

• CSS 박스 섀도우 생성기 — 그림자 값을 세밀하게 조정
• CSS 변수 생성기 — 유리 효과 값을 디자인 토큰으로 저장
• CSS Grid 생성기 — 유리 카드 뒤의 레이아웃 구성
• CSS Flexbox 생성기 — flexbox로 유리 요소 배치