글래스모피즘 생성기
신규서리 유리 카드를 디자인하고 CSS 복사 — 라이브 미리보기.
Browser support. backdrop-filter works in all current browsers; the copied CSS includes the -webkit- prefix for Safari. Unsupported browsers fall back to the plain translucent background.
Readability. Transparency changes contrast over busy backgrounds. Raise the tint opacity and aim for a 4.5:1 text-contrast ratio so content stays legible.
Runs entirely in your browser. Nothing is uploaded.
CSS 코드 없이 글래스모피즘 디자인하기
이 글래스모피즘 생성기를 사용하면 슬라이더를 드래그하는 것만으로 블러·투명도·색조·채도·테두리·그림자를 조절하고, 라이브 유리 카드가 즉시 반응하는 모습을 확인할 수 있습니다. 원하는 모양이 완성되면 정확한 CSS(-webkit- 폴백 포함), 동일한 Tailwind 클래스, 또는 바로 붙여넣을 수 있는 HTML 스니펫을 복사하세요. backdrop-filter 값을 일일이 추측하거나 별도 설치 없이 — 모두 브라우저에서 바로 실행됩니다.
글래스모피즘은 macOS, Windows 11, 수많은 최신 대시보드가 유행시킨 반투명 유리 UI 스타일입니다. 카드·모달·내비게이션 바·로그인 폼에 깊이감과 세련미를 더하면서, 형형색색의 배경이 표면 너머로 비쳐 보이게 합니다. 값을 직접 손으로 조정하려면 저장-새로고침을 반복해야 하지만, 이 도구를 사용하면 그 과정을 모두 건너뛸 수 있습니다.
프로스트 글라스 효과의 원리
세 가지 CSS 속성이 이 효과를 만들어냅니다. rgba(255,255,255,0.18) 같은 반투명 배경 채우기로 뒤의 콘텐츠가 비쳐 보이게 합니다. 배경 블러 — backdrop-filter: blur(10px) — 는 요소 자체가 아닌, 요소 뒤에 있는 것을 흐릿하게 만들어 유리처럼 보이게 합니다. 그리고 1px solid rgba(255,255,255,0.3) 같은 가는 테두리가 가장자리를 따라 빛을 포착합니다. 여기에 부드러운 box-shadow와 넉넉한 border-radius를 더하면 패널이 유리판처럼 읽힙니다.
채도도 중요합니다. 블러에 saturate(120%)를 체이닝하면 유리를 통해 배어드는 색상이 더 선명해져 고급스러운 유리 특유의 선명하고 발광하는 느낌을 줍니다. 이 도구는 블러 반경·색조 색상·색조 불투명도·채도·테두리 두께·테두리 불투명도·border-radius·그림자 강도 등 모든 컨트롤을 제공하므로, 단 한 줄의 코드도 편집하지 않고 프로스트 글라스 CSS를 정밀하게 조정할 수 있습니다.
CSS와 Tailwind 출력, 나란히 비교
출력 탭을 전환하면 효과를 순수 CSS, Tailwind 글래스모피즘 클래스, 또는 붙여넣기 전용 HTML + <style> 스니펫으로 얻을 수 있습니다. CSS 출력에는 항상 Safari를 지원하는 -webkit-backdrop-filter 접두사가 포함됩니다. Tailwind 출력은 backdrop-blur-[10px], bg-[#ffffff]/18, border-[#ffffff]/30, rounded-[16px] 같은 임의값 유틸리티 클래스를 사용하여 슬라이더 값과 정확히 일치합니다 — 직접 작성한 CSS를 선호하든 유틸리티 우선 워크플로를 선호하든 편리하게 사용할 수 있습니다.
이 이중 출력은 경쟁 도구들과 비교했을 때 가장 큰 차별점 중 하나입니다. Glassmorphism.com과 Glass UI는 순수 CSS만 내보내므로 Tailwind 사용자는 값을 직접 변환해야 합니다. UtiloKit은 두 가지를 자동으로 처리하므로, 스택에 관계없이 코드베이스에 바로 붙여넣을 수 있습니다.
나만의 배경 이미지로 미리보기
유리는 뒤에 컬러풀한 무언가가 있을 때만 유리처럼 보입니다. 그래서 라이브 미리보기는 사용자가 직접 제어하는 배경 위에 표시됩니다. 석양·바다·오로라·비비드·다크 씬 등 그라디언트 프리셋 중에서 선택하거나, 직접 이미지를 업로드하여 실제 배포할 사진이나 히어로 이미지 위에서 유리 효과를 테스트하세요. 이것이 글래스모피즘 배경 미리보기를 평면 스워치가 아닌 사실적인 모습으로 만들어 주며, 장면의 가장 복잡한 부분에서 텍스트 대비를 확인할 수 있게 해줍니다.
커스텀 배경 업로드는 glassmorphism.com에서 눈에 띄게 부족한 기능입니다. 특정 히어로 사진 위에 유리 오버레이를 디자인할 때, 일반 그라디언트로 테스트하면 가독성을 신뢰할 수 있게 확인하기 어렵습니다. 실제 이미지를 직접 넣으면 프로덕션에 반영되기 전에 대비 문제를 미리 발견할 수 있습니다.
다른 글래스모피즘 생성기와의 비교
대부분의 대안 도구는 단일 배경으로 된 기본 CSS 스니펫만 제공합니다. 인기 있는 Glassmorphism.com(Michal Malewicz 제작)은 Tailwind 출력이 없고, 커스텀 배경 업로드도, 팀 검토를 위한 공유 링크도 없습니다. Glass UI(glass-ui.com)도 마찬가지로 제한적입니다 — 채도·박스 섀도 강도·색조 색상을 독립적으로 제어할 수 없습니다. CSS-tricks 튜토리얼과 Codepen 스니펫은 디자이너가 사양을 변경할 때마다 직접 수정해야 하는 정적 코드를 제공합니다.
UtiloKit은 모든 컨트롤을 한 화면에서 제공합니다: 블러·색조 색상·색조 불투명도·채도·테두리 두께·테두리 불투명도·border-radius·box-shadow. 공유 링크는 이 모든 값을 URL에 담아 동료에게 정확한 사양을 전달할 수 있습니다. 계정 불필요, 업로드 불필요, 워터마크 없음 — 그냥 복사하고 바로 사용하세요.
프리셋, 브라우저 지원 및 가독성
프로스트 카드·다크 글라스·내비게이션 바·비비드 등 4가지 원클릭 프리셋이 강력한 시작점을 제공하며, 이후 세부 조정이 가능합니다. 생성된 CSS에는 항상 -webkit-backdrop-filter 접두사가 포함되어 Chrome·Edge·Firefox·Safari 전반에서 효과가 작동하며, 지원하지 않는 브라우저에서는 단순 반투명 채우기로 자연스럽게 대체됩니다.
투명도는 대비를 변화시키므로 가독성에 주의하세요. 색조 불투명도를 약 25~40%로 높이고, 채도를 추가하여 복잡한 배경을 진정시키고, WCAG 4.5:1 텍스트 대비 비율을 목표로 하세요. 유리 카드는 가볍고 산뜻해 보여야 하지만, 텍스트가 읽기 어려워서는 안 됩니다. 라이브 미리보기에서 텍스트가 읽기 어려워진다면, 배포 전에 색조 불투명도를 높이라는 신호입니다.
완전 무료, 즉시 사용, 개인정보 보호
가입도, 설치도 필요하지 않습니다. 조정하는 모든 값, 라이브 미리보기, 드래그한 이미지까지 모두 브라우저 로컬에서 처리됩니다 — 어떠한 서버에도 업로드되지 않습니다. 링크 복사 버튼을 사용하면 모든 설정이 URL에 담겨 팀원과 구성을 공유할 수 있습니다. 이 유리 카드 생성기를 북마크해 두고, 이메일을 먼저 요구하는 도구의 번거로움 없이 프로스트 글라스 효과가 필요할 때마다 바로 사용하세요.
Frequently asked questions
글래스모피즘이란 무엇인가요?
글래스모피즘은 요소를 마치 서리 낀 유리처럼 보이게 만드는 UI 스타일입니다 — 뒤에 있는 모든 것을 흐릿하게 만드는 반투명 패널에, 가는 밝은 테두리와 깊이감을 주는 부드러운 그림자를 더합니다. macOS Big Sur, Windows 11 아크릴 표면, 최신 로그인 카드에서 이 스타일을 볼 수 있습니다. 세 가지 핵심 요소는 반투명 배경 채우기, 배경 블러, 그리고 미묘한 1px 테두리입니다. 예: background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).
CSS로 글래스모피즘 효과를 어떻게 만드나요?
요소에 반투명 배경과 배경 블러를 적용한 후 가는 테두리를 추가하세요. 좋은 시작점은 다음과 같습니다: background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). 핵심은 배경 채우기가 부분적으로 투명해야 뒤의 블러가 보인다는 것입니다. 위의 슬라이더를 드래그하여 세밀하게 조정하고 정확한 CSS를 복사하세요.
CSS에서 backdrop-filter는 어떤 역할을 하나요?
backdrop-filter는 요소의 자체 콘텐츠가 아닌, 요소 뒤의 영역에 그래픽 효과 — 주로 blur() — 를 적용합니다. 따라서 backdrop-filter: blur(10px)는 박스 뒤에 렌더링된 모든 것을 흐릿하게 만들어 서리 유리 효과를 생성합니다. 필터를 체이닝할 수도 있습니다. 예: backdrop-filter: blur(10px) saturate(150%)는 유리 뒤의 색상을 흐리게 하면서 동시에 강조합니다. 요소 자체의 배경이 적어도 부분적으로 투명해야만 효과가 나타납니다.
프로스트 글라스 효과는 어떻게 만드나요?
프로스트 글라스는 더 강한 블러와 약간 더 불투명한 색조로 구성된 글래스모피즘입니다. background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px를 시도해 보세요. 블러를 14~20px로 높이고 색조 불투명도를 약 20~30%로 설정하면 표면이 투명하지 않고 '서리 낀' 느낌으로 보입니다. UtiloKit의 Frosted card 프리셋이 이 값들을 즉시 설정해 주므로, 거기서 시작하여 조정할 수 있습니다.
backdrop-filter는 모든 브라우저에서 작동하나요?
네 — backdrop-filter는 현재 주요 브라우저(Chrome, Edge, Firefox, Safari) 모두에서 지원됩니다. Safari는 오랫동안 -webkit-backdrop-filter 접두사로 지원해 왔으므로, 항상 두 줄을 모두 포함하세요: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). UtiloKit의 글래스모피즘 생성기는 자동으로 접두사가 붙은 버전을 출력합니다. 지원하지 않는 매우 오래된 브라우저는 단순 반투명 배경으로 자연스럽게 대체됩니다.
backdrop-filter나 글래스모피즘이 작동하지 않는 이유는 무엇인가요?
세 가지 일반적인 원인이 있습니다: (1) 요소 뒤에 블러할 것이 없습니다 — backdrop-filter는 뒤에 렌더링된 콘텐츠에만 영향을 주므로, 이미지나 그라디언트 위에 배치해야 합니다. (2) 요소 자체의 배경이 완전히 불투명합니다 — rgba(255,255,255,0.18) 같은 rgba() 채우기를 사용하여 블러가 보이게 하세요. (3) Safari를 위한 -webkit-backdrop-filter 접두사를 빠뜨렸습니다. 또한 부모 요소에 filter, transform 또는 will-change가 있으면 포함 블록을 생성하여 효과가 완전히 깨질 수 있습니다.
Tailwind CSS에서 글래스모피즘을 어떻게 적용하나요?
backdrop-blur 유틸리티를 반투명 배경 및 희미한 테두리와 결합하세요. 예: class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". backdrop-saturate-150을 사용하면 뒤의 색상을 더욱 선명하게 만들 수 있습니다. 정확한 값은 위의 출력을 Tailwind 탭으로 전환하세요 — 슬라이더 값과 정확히 일치하는 backdrop-blur-[10px], bg-[#ffffff]/18, border-[1px], border-[#ffffff]/30, rounded-[16px] 같은 임의값 클래스를 생성합니다.
글래스모피즘과 뉴모피즘의 차이는 무엇인가요?
글래스모피즘은 투명도와 배경 블러를 사용하여 요소가 콘텐츠 위에 떠 있는 서리 낀 유리처럼 보이게 합니다. 뉴모피즘(소프트 UI)은 정반대입니다: 페이지와 같은 색상의 불투명한 요소에 쌍으로 된 밝고 어두운 그림자로 3D 돌출 효과를 줍니다 — 예: box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. 글래스모피즘은 돋보이기 위해 화려한 배경이 필요하고, 뉴모피즘은 작동하기 위해 단일 색상의 평면 배경이 필요합니다.
블러를 얼마나 사용해야 하나요?
대부분의 카드에는 8~16px의 배경 블러가 적절합니다. 가볍고 살짝 서리 낀 유리에는 약 5~8px, 일반적인 카드나 모달에는 10~16px, 묵직한 서리 유리 내비바나 오버레이에는 16~25px을 사용하세요. 블러를 높일수록 색조 불투명도도 약간 높여 텍스트 가독성을 유지하세요. 위의 블러 슬라이더는 0~40px 범위이므로, 추측 없이 특정 배경 이미지에 맞는 최적값을 찾을 수 있습니다.
유리 위의 텍스트를 어떻게 읽기 쉽게 만드나요?
가독성은 텍스트와 흐릿한 배경 사이의 대비에서 옵니다. 색조 불투명도를 약 25~40%로 높여 표면의 투명도를 줄이고, backdrop-saturate를 추가하여 뒤의 화려한 색상을 완화하며, 강한 대비의 텍스트 색상을 선택하세요 — 어두운 색조 유리에는 흰색 텍스트, 밝은 색조에는 어두운 텍스트. 본문 텍스트의 경우 WCAG 4.5:1 대비 비율을 목표로 하고, 배경 이미지에서 가장 화려한 부분에 작은 텍스트를 배치하지 마세요.
글래스모피즘은 웹 접근성을 준수하나요?
가능하지만 주의가 필요합니다. 투명도는 유리 뒤의 색상이 계속 변하기 때문에 대비를 예측하기 어렵게 만들어, 텍스트가 WCAG 4.5:1 최소 기준 이하로 떨어질 수 있습니다. 충분히 높은 색조 불투명도(30% 이상)를 사용하고, 배경의 가장 복잡한 부분에서 텍스트를 테스트하며, 블러만으로 콘텐츠를 분리하지 마세요. 또한 prefers-reduced-transparency를 설정한 사용자를 위해 CSS에서 더 불투명한 폴백을 제공하세요.
UtiloKit 글래스모피즘 생성기는 glassmorphism.com이나 Glass UI와 어떻게 다른가요?
Glassmorphism.com(Michal Malewicz 제작)은 빠른 시작점을 제공하지만, 직접 배경 이미지를 업로드하거나 채도를 조절하거나 Tailwind 클래스를 내보낼 수 없습니다. Glass UI(glass-ui.com)도 마찬가지로 제한적입니다 — 단일 배경 미리보기에, Tailwind 출력이 없고, 공유 링크도 없습니다. UtiloKit은 직접 이미지를 드래그하고, 채도와 그림자 강도를 포함한 모든 파라미터를 조정하며, CSS와 Tailwind 출력을 모두 받고, URL을 통해 정확한 구성을 공유할 수 있습니다. 모든 것이 브라우저에서 실행되며 어떠한 서버에도 업로드되지 않습니다.
웹사이트에 유리 카드를 어떻게 추가하나요?
배경 이미지나 그라디언트 위에 컨테이너를 배치하고, 생성된 CSS를 카드에 적용하세요. 최소 예시: 부모에 배경을 지정한 후 자식 요소에 background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px를 스타일링합니다. 위의 출력에서 바로 사용 가능한 HTML 스니펫을 복사하세요 — 별도 설정 없이 페이지에 바로 붙여넣을 수 있는 마크업과 스타일 블록이 포함되어 있습니다.
이 글래스모피즘 생성기를 아이폰이나 안드로이드에서 사용할 수 있나요?
네. UtiloKit의 글래스모피즘 생성기는 완전히 모바일 반응형이며, iPhone의 Safari, Android의 Chrome, 모든 최신 모바일 브라우저에서 작동합니다. 슬라이더는 터치 친화적이고, 라이브 미리보기는 실시간으로 업데이트되며, CSS나 Tailwind 출력 복사는 데스크톱과 마찬가지로 휴대폰 클립보드에서 작동합니다. 모든 것이 서버 없이 브라우저에서 실행되므로 설치할 것이 없습니다 — 페이지를 열고 바로 디자인을 시작하세요.
글래스모피즘 구성을 팀원과 공유할 수 있나요?
네 — 링크 복사 버튼을 클릭하면 모든 슬라이더 값이 URL에 직접 인코딩됩니다. 디자이너나 개발자에게 그 링크를 공유하면 동일한 구성을 바로 열 수 있습니다: 같은 블러, 같은 색조 색상과 불투명도, 같은 채도, 같은 테두리 설정과 그림자. 계정도 불필요하고, 내보낼 파일도 없습니다. 이것은 glassmorphism.com과 Glass UI가 부족한 부분 중 하나입니다 — 두 도구 모두 공유 가능한 구성 링크를 지원하지 않습니다.
Related tools
모든 도구 보기
신규 색상 대비 검사기
텍스트와 배경색 사이의 WCAG AA/AAA 대비 비율 확인.
신규 CSS 그라데이션 생성기
라이브 미리보기와 함께 선형, 방사형, 원뿔형 CSS 그라데이션 제작.
신규 CSS Box-Shadow 생성기
프리셋과 라이브 미리보기로 다중 레이어 CSS box-shadow 제작. CSS, 값 또는 React 스타일을 즉시 복사.
신규 색상 팔레트 생성기
보색, 유사색, 삼색, 단색 팔레트 생성.
신규 Cubic Bezier 생성기
조절점을 드래그해 CSS 이징 곡선을 디자인 — 라이브 미리보기.
신규 Border Radius 생성기
CSS 둥근 모서리와 유기적 블롭 모양을 시각적으로 제작.