글래스모피즘 생성기
반투명 흰 배경·backdrop blur·border·shadow·radius를 조합한 glassmorphism CSS를 생성합니다.
사용 방법
- 각 glass control을 조절하면서 preview를 보고 CSS block을 복사합니다.
핵심 기능과 처리 범위
glass blur, surface opacity, border opacity, shadow opacity, radius를 조절해 vendor prefix 포함 backdrop-filter 예시를 만듭니다.
처리 원리
rgba white background, backdrop-filter blur, translucent border, black shadow와 radius 선언을 함께 출력합니다.
예시
18% white surface와 16px blur를 이용해 투명 card 효과를 만들 수 있습니다.
이럴 때 유용합니다
- glass card·overlay의 기본 CSS 초안을 만들 때
사용 전 참고
- backdrop-filter 지원·성능은 browser와 실제 배경에 따라 다르고 읽기 대비는 별도 확인해야 합니다.
자주 묻는 질문
모든 브라우저에서 같은가요?
아닙니다. backdrop-filter 지원과 렌더링 품질이 browser별로 다를 수 있습니다.