글래스모피즘 생성기
반투명 유리 카드를 다이얼로 조절하세요. 블러, 틴트, 테두리 하이라이트, 모서리 반경, 그림자를 설정하고, 진짜 애니메이션 배경 위에 떠 있는 모습을 미리 보면서 움직일 때 블러 품질을 확인할 수 있습니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
backdrop-filter: blur()는 반투명 유리 느낌을 만드는 CSS 속성입니다. 단순히 평평한 색상을 페이드하는 대신 그 뒤에서 움직이는 모든 것을 블러 처리하는 반투명 패널이죠. 문제는 블러 품질을 정적인 견본으로는 판단하기 거의 불가능하다는 점입니다. 실제 콘텐츠, 비디오, 애니메이션 히어로 섹션이 있는 페이지에서처럼 무언가가 실제로 그 아래에서 움직일 때만 설득력 있게 보입니다. 이 생성기는 미리 보기 카드를 정지된 이미지가 아닌 진짜 애니메이션 배경 위에 배치하므로, 슬라이더를 드래그할 때 보는 그대로 방문자가 실제 경험하게 됩니다.
배경은 실제 CSS 애니메이션입니다. 요소 크기의 400%로 그려진 큰 linear-gradient가 @keyframes를 통해 background-position을 왕복 루프로 이동시킵니다. 자바스크립트 애니메이션 루프도, 캔버스도 아닌, 프로덕션 히어로 섹션에서 사용되는 것과 동일한 연속 background-position 기법입니다. 블러, 틴트 색상과 불투명도, 테두리 하이라이트 색상/불투명도/두께, 모서리 반경, 그림자 부드러움 모두 플로팅 카드의 라이브 스타일을 구동하며, 복사 가능한 CSS 상자에는 정확히 같은 값이 반영됩니다.
모든 브라우저가 backdrop-filter를 지원하는 것은 아니므로, 이 생성기는 진짜 @supports not (backdrop-filter: blur(1px)) 블록도 생성합니다. 이는 형식적인 제스처가 아니라, 실제 틴트 불투명도에서 계산된 배경색을 가진 폴백 규칙입니다. 블러 없는 반투명은 눈에 띄게 보기 안 좋기 때문에(뒤에 있는 것이 블러 없이 그대로 비쳐 보임), 폴백은 사용자가 선택한 틴트 불투명도보다 알파 채널을 자동으로 높입니다. 생성된 CSS의 주석에는 그 이유와 얼마나 높였는지 정확히 설명됩니다.
모든 계산과 렌더링은 사용자 자신의 브라우저에서 이루어집니다. 업로드, 계정, 서버 왕복이 전혀 없습니다. 카드가 마음에 들면 CSS를 복사하여 사진, 비디오, 그라데이션 위에 배치할 모든 요소에 적용하세요. 그리고 @supports 블록을 유지하면 오래된 브라우저에서도 거의 보이지 않는 카드 대신 읽을 수 있고 더 불투명한 카드를 보여줄 수 있습니다.