🧊
글래스모피즘 CSS 생성기
반투명 유리 효과를 조절하고 backdrop-filter CSS를 복사하세요.
설정
16px
20%
160%
20px
30%
Glassmorphism
CSS
background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 20px;
광고
글래스모피즘 생성기는 반투명 유리 재질 느낌의 카드 디자인을 배경 흐림 정도·투명도·테두리 값을 조절하며 미리보고, 완성된 CSS 코드를 바로 복사할 수 있게 해줍니다.
글래스모피즘의 핵심 3요소
반투명 배경(투명도), 배경 흐림 효과(backdrop-filter blur), 은은한 테두리(border)를 함께 조합해야 유리 질감이 자연스럽게 표현됩니다.
자주 묻는 질문
모든 브라우저에서 동일하게 보이나요?
backdrop-filter 속성은 대부분의 최신 브라우저에서 지원되지만, 구형 브라우저에서는 흐림 효과가 표시되지 않을 수 있습니다.
밝은 배경과 어두운 배경 중 어디에 더 잘 어울리나요?
일반적으로 그라디언트가 있는 배경이나 이미지 위에 올렸을 때 유리 질감이 더 도드라져 보입니다.
광고
광고