글래스모피즘 생성기
배경 흐림, 투명도, 테두리가 적용된 서리 낀 유리 UI 카드를 만들고 CSS를 복사하세요.
글래스 카드
선명한 배경 위에 떠 있는 서리 낀 유리.
—
backdrop-filter와 -webkit-backdrop-filter를 모두 출력합니다. 참고: backdrop-filter는 구형 브라우저(예: Firefox 103 미만)에서 지원되지 않으므로 해당 환경을 위해 단색 대체 배경을 추가하세요.
글래스모피즘 생성기 소개
글래스모피즘 생성기는 뒤에 놓인 것을 흐리게 비추는 반투명 패널, 즉 서리 낀 유리 카드 효과를 만들어 줍니다. 슬라이더로 backdrop-filter의 흐림과 채도, 유리 색조와 투명도, 테두리 색과 불투명도, 모서리 반경, 외부 그림자를 조절할 수 있으며, 모든 변경 사항이 선명한 배경 위에서 실시간으로 렌더링되어 효과를 실감 나게 판단할 수 있습니다.
subtle, frosted, vivid, dark glass 네 가지 품질 프리셋은 시작점으로 삼을 만한 검증된 조합을 제공합니다. dark 프리셋은 같은 레시피가 다크 UI에 어떻게 적용되는지 보여주는데, 여기서는 은은한 밝은 테두리가 유리를 배경과 구분하는 역할의 대부분을 담당합니다.
생성된 CSS에는 backdrop-filter와 Safari에서 필요한 -webkit-backdrop-filter 접두사가 모두 포함되어 있습니다. 다만 호환성에 유의하세요. 예를 들어 103 버전 이전의 Firefox 같은 구형 브라우저는 backdrop-filter를 지원하지 않으므로, 이런 브라우저를 위한 단색 대체 배경을 함께 제공해야 합니다.
글래스모피즘 생성기 사용 방법
- subtle, frosted, vivid, dark glass 프리셋 중 하나로 시작하거나 기본값에서 시작합니다.
- 백드롭 필터의 흐림 정도와 채도를 조정합니다.
- 유리 색조와 투명도를 설정합니다.
- 테두리 색상, 테두리 불투명도, 모서리 반경, 외곽 그림자를 조정합니다.
- CSS를 복사합니다. Safari용 -webkit- 접두사 속성이 이미 포함되어 있습니다.