Glassmorphism 생성기

유리 효과 CSS를 시각적으로 만들고 코드를 복사합니다

블러(0~30px), 배경 투명도, 채도(100~300%), 테두리 투명도, 모서리 곡률, 배경색 여섯 개 슬라이더를 만지면 보라색 그라데이션 위에 놓인 카드 미리보기가 즉시 반응합니다. 결과 CSS에는 backdrop-filter와 -webkit-backdrop-filter가 나란히 들어가 Safari까지 바로 대응됩니다. 히어로 위의 로그인 카드, 이미지 위에 떠 있는 내비게이션 바, 대시보드 위젯에 반투명 유리 질감을 주고 싶을 때 파라미터를 눈으로 정한 뒤 복사해 쓰면 됩니다.

이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.

Glass Card

아름다운 유리 효과 카드입니다

Blur 10px

Background Opacity 20%

Saturation 180%

Border Opacity 20%

Border Radius 16px

Color

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는 일부 브라우저에서 지원되지 않을 수 있습니다.

Glassmorphism, 이렇게 쓰세요

반투명 배경, backdrop-filter 블러, 얇은 테두리를 조합해 유리 질감 카드 CSS를 만듭니다.

이미지·그라데이션 위에 올라가는 카드나 내비게이션 바에 깊이감을 줄 때 씁니다.

backdrop-filter 는 뒤에 배경이 있어야 효과가 보이고, 구형 브라우저는 -webkit- 접두어가 필요합니다. 투명도 0.1~0.25 범위가 가장 자연스럽습니다.

같은 카테고리 도구

그라데이션CSS 그라데이션 코드 생성 Box Shadow그림자 CSS 미리보기·복사 Text Shadow글자 그림자 CSS 생성 Border Radius모서리 곡률 CSS 생성

자주 묻는 질문

Q. Firefox에서 블러가 안 보여요.

최신 Firefox는 지원하지만 구버전은 backdrop-filter 를 무시합니다. 배경색 투명도로 최소한의 구분을 남겨 두세요.

Q. saturate 값은 왜 필요한가요?

블러만 주면 뒤 배경이 탁해 보입니다. 채도를 150~200% 정도 올리면 유리 뒤 색이 선명하게 비쳐 실제 유리 느낌이 납니다.

Q. 다크 모드에서는 어떤 값이 어울리나요?

배경색을 검정이나 짙은 남색으로 바꾸고 투명도를 0.3~0.4로 올리세요. 흰색 유리는 어두운 배경에서 뿌옇게만 보입니다.