Glassmorphism 생성기
CSS 유리 효과(glassmorphism)를 시각적으로 만들고 코드를 복사하세요.
Glass Card유리 효과 미리보기
12px
20%
30%
20px
#ffffff
CSS
background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3);
프리셋
Glassmorphism 생성기 안내
이 무료 온라인 도구로 CSS glassmorphism(유리 효과)를 시각적으로 만들 수 있습니다. backdrop-filter blur, 투명도, 테두리를 조절하고 컬러풀한 배경 위에서 실시간으로 결과를 확인하세요.
기능
- backdrop-filter blur 조절 (0~30px)
- 배경 투명도 + 테두리 투명도 슬라이더
- 배경 색상 선택기 (흰색/검정 빠른 전환)
- Border radius 조절
- 4가지 프리셋: Subtle, Frosted, Heavy, Dark Glass
- 컬러풀한 배경 위 실시간 미리보기
- 원클릭 CSS 코드 복사 (-webkit-backdrop-filter 포함)
Related Tools
🎨Color Picker
HEX, RGB, HSL converter🌈CSS Gradient
Visual gradient builder🎨Color Palette
Color harmony generator✏️SVG Editor
Edit & optimize SVG