CSS 글래스모피즘 생성기

CSS 글래스모피즘 생성기란?

CSS 글래스모피즘 생성기는 유리(글래스모피즘) UI 스타일을 시각적으로 편집하는 무료 도구로, 프런트엔드 개발자와 프로덕트 디자이너를 위해 만들어졌습니다. 블러 양, 표면 투명도, 색상 채도, 테두리 두께, 모서리 반경, 그림자 강도를 숫자 입력과 슬라이더로 조정한 뒤 스와치로 색조 색상을 고릅니다. 미리보기 화면이 선명한 그라데이션 배경 위에 유리 패널을 실시간으로 보여 주고, backdrop-filter·반투명 배경·은은한 테두리·box-shadow를 사용한 완성된 CSS가 생성되어 복사할 수 있습니다. 유리 느낌의 카드, 내비게이션 바, 모달, 오버레이를 rgba 알파를 손으로 맞추거나 -webkit-backdrop-filter 접두사를 외우지 않고도 만들 수 있습니다.

CSS 글래스모피즘 생성기 사용법

1. ‘블러’(px)를 설정해 패널 뒤 영역을 얼마나 뿌옇게 흐릴지 조정합니다.
2. ‘투명도’를 낮추면 유리가 더 비치고, 높이면 더 불투명하고 단단한 표면이 됩니다.
3. ‘채도’를 100% 위로 올리면 배경 색이 유리 너머로 더 선명하게 비칩니다.
4. 스와치로 색조 색상을 고르고 ‘테두리’ 두께, ‘반경’, ‘그림자’를 조정해 마무리합니다.
5. 값을 바꿀 때마다 배경 위에서 미리보기가 실시간으로 갱신되는 것을 확인합니다.
6. 생성된 CSS를 스타일시트에 복사합니다 — -webkit-backdrop-filter 폴백이 이미 포함되어 있습니다.

예시

블러 12, 투명도 25%, 채도 120%, 반경 16, 테두리 1, 그림자 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

블러 8, 투명도 60%, 채도 100%, 반경 0, 테두리 1, 그림자 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

색조 #0f172a, 블러 20, 투명도 30%, 채도 140%, 반경 24, 그림자 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

자주 묻는 질문

backdrop-filter는 무엇을 하나요?

backdrop-filter는 요소 뒤에 있는 것에 그래픽 효과 — 여기서는 블러와 채도 — 를 적용하며, 이것이 유리 같은 모습을 만듭니다. 생성기는 여러 브라우저에서 동작하도록 backdrop-filter와 -webkit-backdrop-filter 접두사를 함께 출력하고, 반투명 배경·테두리·그림자도 붙입니다.

투명도 컨트롤은 왜 있나요?

유리 효과는 흐려진 배경이 비쳐 보이도록 부분적으로 투명한 배경이 필요합니다. 투명도 슬라이더는 패널 배경색(rgba)의 알파를 설정합니다 — 값이 낮을수록 더 투명하고, 높을수록 더 불투명하고 단단해집니다.

컬러나 다크 유리도 만들 수 있나요?

네. 스와치로 아무 색조나 고르면 도구가 그 색을 rgba 배경에 섞으므로 따뜻한, 차가운, 또는 어두운 유리를 만들 수 있습니다. 어두운 색조와 높은 투명도를 함께 쓰면 차분한 오버레이가, 흰색을 유지하면 클래식한 유리 패널이 됩니다.

모든 브라우저에서 동작하나요?

대부분의 최신 브라우저는 backdrop-filter를 지원합니다. 생성된 CSS에는 Safari와 구형 Chromium용 -webkit-backdrop-filter 접두사가 들어 있지만, 아주 오래된 브라우저는 이를 무시하고 블러 없이 반투명 배경만 표시합니다.

제 데이터가 어딘가로 업로드되나요?

아니요. 이 생성기는 전부 JavaScript로 브라우저 안에서 실행됩니다 — 색상과 값이 서버로 전송되지 않으므로 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.