Tool Hub

글래스모피즘 생성기

투명도·블러 조절로 글래스모피즘 CSS 코드 생성

프리셋

Glassmorphism 효과는 뒤 배경의 색·이미지가 비쳐야 보이므로, 미리보기는 의도적으로 컬러풀한 그라디언트 위에 올려져 있습니다.

글래스 미리보기

backdrop-filter · rgba 배경

CSS
.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 12px;
}

사용 방법

  1. 사전 설정 버튼(예: Frosted, Tinted, Dark)을 클릭하여 준비된 스타일로 시작하세요.
  2. backdrop-filter, 배경, 테두리 불투명도를 사용하여 제어를 조정하세요.
  3. 그라데이션 배경에 대해 카드 미리보기가 실시간으로 업데이트됩니다.
  4. 생성된 CSS(backdrop-filter, background, border)를 복사하여 프로젝트에 붙여넣으세요.

예제

  • blur 12px, background rgba(255,255,255,0.15), border rgba(255,255,255,0.3)을 설정하면 미묘한 frosted-glass 카드 효과를 생성합니다.
  • Dark 사전 설정은 어두운 반투명 배경에 음소거된 blur를 적용하며, 어두운 테마 대시보드에 적합합니다.

프로덕션 사용 전 출력을 검증하십시오. 보증 없음 — 자세한 내용은 이용약관.