유리 효과 CSS를 시각적으로 만들고 코드를 복사합니다
아름다운 유리 효과 카드입니다
/* Glassmorphism */ background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter는 일부 브라우저에서 지원되지 않을 수 있습니다.
반투명 배경, backdrop-filter 블러, 얇은 테두리를 조합해 유리 질감 카드 CSS를 만듭니다.
이미지·그라데이션 위에 올라가는 카드나 내비게이션 바에 깊이감을 줄 때 씁니다.
backdrop-filter 는 뒤에 배경이 있어야 효과가 보이고, 구형 브라우저는 -webkit- 접두어가 필요합니다. 투명도 0.1~0.25 범위가 가장 자연스럽습니다.
최신 Firefox는 지원하지만 구버전은 backdrop-filter 를 무시합니다. 배경색 투명도로 최소한의 구분을 남겨 두세요.