CSS 글래스모피즘

배경 블러와 반투명 테두리 코드를 실시간으로 만들어 줍니다.

효과 설정

유리 색상

#FFFFFF

배경 불투명도15%

배경 흐림10px

채도180%

테두리 불투명도30%

모서리 반경16px

그림자 불투명도10%

미리보기 배경

실시간 미리보기

CSS

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 팁

가장 좋은 결과: 불투명도 10–25%, 흐림 5–15px
Safari 호환을 위해 -webkit-backdrop-filter 접두사를 포함했습니다
효과가 밋밋해 보이면 부모 요소에 다채로운 배경이 있는지 확인하세요
채도 180%는 유리 뒤의 색을 선명하게 유지합니다

비슷한 CSS·디자인

전체 보기

코드 이미지 변환

코드 조각을 보기 좋은 스크린샷으로 만들어 줍니다.

열기 →

CSS 그라디언트 생성기

선형, 방사형, 원뿔형 그라디언트를 눈으로 보며 만들고 CSS를 바로 복사합니다.

열기 →

박스 섀도 생성기

겹겹이 부드러운 그림자를 미리보기와 함께 만들어 줍니다.

💬 댓글

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요!

CSS 글래스모피즘이(가) 무엇인가요?

불투명도, 블러, 채도, 테두리를 조절해 젖빛 유리 카드를 실시간으로 미리 보고 backdrop-filter를 포함한 CSS를 복사합니다.

사용 방법

왼쪽 패널에는 불투명도, 블러, 채도, 테두리 불투명도, 테두리 반경, 그림자, 색상 선택기의 7개 컨트롤이 있으며 모두 미리보기 카드를 즉시 갱신합니다.
최적의 결과: 불투명도 10–25%, 블러 5–15px. 이 두 매개변수가 젖빛 유리 느낌에 가장 큰 영향을 줍니다.
채도를 180%로 올리면 유리 뒤의 색이 선명해지고, 테두리 불투명도는 카드에 은은한 강조 테두리를 더합니다.
6개의 배경 견본(보라, 바다, 노을 등)을 클릭해 여러 그라데이션 위에서 유리 효과를 시험해 보세요.
“CSS 복사”를 클릭하면 backdrop-filter와 -webkit-backdrop-filter(Safari 호환)를 모두 포함한 실무용 코드를 얻습니다.

자주 묻는 질문

글라스모피즘 효과는 어떻게 만드나요?

배경 흐림을 위한 backdrop-filter: blur(), 반투명 background-color, 은은한 테두리를 사용합니다.

모든 브라우저에서 지원되나요?

Chrome, Edge, Safari에서는 잘 지원됩니다. Firefox는 실험적 플래그가 필요합니다. 안전을 위해 -webkit- 접두사를 함께 쓰세요.

실시간 미리보기가 되나요?

네. 슬라이더나 색상을 조절하면 미리보기가 즉시 갱신됩니다.