CSS 유리형태 생성기

CSS GlassMorphism 생성기는 반투명 표면이 그 뒤에 있는 모든 것을 흐리게 하는 Frosted-Glass UI 스타일의 시각적 편집기입니다. 슬라이더로 배경 흐림, 투명도, 채도, 채도, 색조 색상 및 모서리 반경을 조정하고, 다채로운 배경에서 미리보기 업데이트를 보고, 생성하는 정확한 CSS를 복사합니다.

GlassMorphism은 요소 자체가 아닌 요소 뒤에 있는 콘텐츠에 흐림 효과를 적용하는 backdrop-filter 속성에 의존합니다. 반투명 배경, 헤어라인 테두리, 부드러운 그림자와 결합하여 현대 운영 체제에서 대중화되는 레이어드 글라스 모양을 생성합니다. 손으로 균형을 잡는 것은 성가시므로 이 도구는 모든 값을 관리하고 깨끗하고 복사 가능한 블록을 출력합니다.

모든 것이 브라우저에서 실행됩니다. Frosted,Dark, Vibrant 와 같은 사전 설정을 선택하고 슬라이더를 미세 조정하고 CSS 를 복사하십시오 -webkit 접두사가 붙은 백드롭 필터를 포함하여 더 넓은 지원을 위해 계정이없고 업로드가 없으며 페이지가로드되면 오프라인으로 계속 작동합니다.

효과는 함께 작동하는 두 속성에 따라 달라지며 둘 중 하나가 누락되면 자동으로 실패합니다. 배경 필터는 요소 뒤에 있는 모든 것을 흐리게 하므로 표시할 부분적으로 투명한 배경 색상이 필요합니다: 완전한 불투명도에서는 볼 것이 없으며 배경이 전혀 없으면 표면이 사라집니다. 또한 흐리게 할 가치가 있는 뒤에 있는 무언가가 필요합니다. 이것이 바로 효과가 일반 배경 위에 평평한 패널처럼 보이고 사진 위에 생생하게 나타나는 이유입니다. 두 가지 실제 비용. 배경 흐림은 특히 넓은 영역이나 스크롤 중에 합성하는 데 더 비싼 것 중 하나입니다. 그리고 반투명 표면의 텍스트는 아래에 있는 모든 패스에 따라 대비 검사를 통과하고 다른 배경에 대해 실패할 수 있습니다.

glassmorphism CSS generator 로서 Frosted preset 에서 시작하며,그 preset 에 대한 복사된 블록은 다음과 같다: background: rgba (255,255, 255,0.2); backdrop-filter: blur (10px) saturate (120%); 다시 -webkit-backdrop-filter 와 같은 값; border-radius: 16px; border: 1px solid rgba (255,255, 255,0.18); 및 box-shadow: 0 8px 32px rgba (0,0, 0,0.12). Dark 를 클릭하면 배경이 12px blur 로 rgba (15,23, 42,0.25) 로 변경되며,이는 라이트 포토 위에 사용할 버전이다.