Design Tools
글래스모피즘 생성기
CSS 블러와 투명도로 서리 낀 유리 효과를 생성합니다
유리 효과
글래스모피즘 효과가 이렇게 보입니다.
Button 1
Button 2
유리 효과
10px
25%
180%
16px
테두리
1px
18%
그림자
32px
37%
배경
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}브라우저 지원
backdrop-filter 속성은 최신 브라우저에서 지원됩니다. 구형 브라우저의 경우 폴백을 제공하세요.
왜 글래스모피즘 생성기을(를) 사용해야 할까요?
- ✓100% 무료 - 숨겨진 비용이나 유료 기능이 없습니다
- ✓회원가입 불필요 - 계정 생성 없이 바로 사용 가능합니다
- ✓개인정보 보호 - 모든 처리가 브라우저에서 이루어집니다. 데이터가 서버로 전송되지 않습니다
- ✓초고속 - 서버 지연 없이 즉시 결과를 확인하세요
사용 방법
- 위의 입력 영역에 텍스트를 입력하거나 붙여넣으세요
- 도구가 자동으로 입력을 처리합니다
- 결과를 복사하거나 파일로 다운로드하세요
주요 기능
- ✓Adjustable blur amount
- ✓Transparency control
- ✓Border and shadow options
- ✓Background image preview
- ✓CSS and Tailwind output
- ✓Browser compatibility info
자주 묻는 질문
글래스모피즘은 모든 브라우저에서 지원되나요?
backdrop-filter 속성은 대부분의 최신 브라우저에서 지원되지만 Safari에서는 접두사가 필요할 수 있습니다.