디자인 / CSS
Glassmorphism CSS 생성기 (반투명 유리 효과)
CSS backdrop-filter로 반투명 유리 효과를 만듭니다. 다채로운 미리보기 위에서 블러, 색상, 불투명도, 채도, 테두리, 모서리 반경을 조정하고 현재 모든 브라우저에서 작동하는 CSS를 복사합니다.
Glassmorphism CSS 생성기 (반투명 유리 효과): backdrop-filter: blur()는 요소 뒤에 있는 내용을 흐리게 만들고, saturate()는 해당 색상을 더 선명하게 만듭니다. 반투명 배경은 유리에 색을 입히고, 은은한 밝은 테두리는 실제 유리처럼 가장자리를 돋보이게 합니다. -webkit- 접두사가 붙은 줄은 18 이전 버전의 Safari를 지원합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
CSS
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}이 효과를 사용하려면 요소 뒤에 색상이 있는 배경이 필요합니다. backdrop-filter가 아래에 있는 요소를 흐리게 만들고, 반투명한 배경을 통해 그 배경이 비쳐 보입니다. -webkit- 줄은 18 이전 버전의 Safari용입니다. 유리 효과 위의 텍스트가 배경의 모든 부분에서 충분한 대비를 유지하는지 확인하십시오.
접근성
일부 사용자는 시스템 설정에서 투명도 감소를 활성화합니다. Chromium 기반 브라우저에서 지원하는 prefers-reduced-transparency 미디어 쿼리를 사용하면 이러한 사용자를 위해 유리 효과를 단색 배경으로 바꿀 수 있습니다.
그림자와 함께 사용
부드럽고 넓은 그림자는 카드를 배경에서 들어 올려 보이게 합니다. 박스 그림자 생성기로 그림자를 조정한 다음 box-shadow 줄을 교체하십시오.
사용 방법
- 블러, 불투명도, 채도를 설정합니다.
- 색상, 테두리, 모서리 반경을 선택합니다.
- CSS를 복사해 다채로운 배경 위에 요소를 배치합니다.
개인정보 보호 및 제한사항
모든 작업은 브라우저에서 실행됩니다.
관련 도구
자주 묻는 질문
유리 효과가 밋밋하게 보이는 이유는 무엇인가요?
뒤에 다채롭거나 세부적인 내용이 있어야 합니다. 단색 위에서는 흐리게 만들 대상이 없기 때문입니다.
backdrop-filter는 느린가요?
특히 넓은 영역이 움직이는 콘텐츠 위에서 스크롤될 때 대부분의 CSS보다 처리 비용이 큽니다. 흐림 영역을 작게 유지하고 여러 영역을 겹쳐 사용하지 마십시오.
텍스트를 읽기 쉬운가요?
확인하십시오. 배경에 따라 대비가 달라집니다. 더 어두운 색상, 높은 불투명도 또는 텍스트 그림자를 사용하면 도움이 됩니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요