글라스모피즘 생성기

이 도구 소개

글래스모피즘 생성기는 CSS backdrop-filter로 반투명 유리 효과를 만들며, 흐림, 배경 불투명도, 채도, 테두리 불투명도, 모서리 반경, 색조를 실시간 미리보기로 조절할 수 있습니다.

사용 방법

1. 유리의 색조를 고릅니다.
2. 흐림, 불투명도, 채도를 조절합니다.
3. 테두리 불투명도와 모서리 반경을 설정합니다.
4. CSS 복사를 누릅니다.

알아두면 좋은 점

• 이 효과는 backdrop-filter: blur() saturate()를 사용해 요소 뒤에 있는 것을 흐리게 만듭니다.
• 반투명 배경(rgba)이 필요합니다. 그렇지 않으면 흐림이 가려집니다.
• 생성된 CSS에는 Safari용 -webkit-backdrop-filter 접두사가 포함됩니다.
• 유리 효과는 화려한 배경이나 이미지 배경 위에서 가장 잘 보이며, 단색 위에서는 흐림이 보이지 않습니다.
• 글자 대비를 확인하세요. 반투명 패널은 복잡한 배경 위에서 WCAG 대비 기준에 못 미칠 수 있습니다.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문