CSS 글라스모피즘 생성기 - 프로스트 유리 효과 만들기
라이브 프리뷰로 아름다운 프로스트 유리 CSS 효과를 생성하세요. 블러, 투명도, 테두리, 그림자를 커스터마이징할 수 있습니다.
자주 묻는 질문
글래스모피즘이란 무엇인가요?
글래스모피즘은 반투명 배경, 배경 블러, 미세한 테두리를 사용하여 젖빛 유리 효과를 만드는 현대적인 UI 디자인 트렌드입니다. Apple의 macOS Big Sur와 Windows 11 Fluent Design에서 널리 알려졌으며, 배경 콘텐츠가 부드럽게 블러 처리되어 보이도록 하여 요소에 깊이감과 레이어링 효과를 줍니다. 이 효과는 주로 backdrop-filter, 반투명 배경, 얇은 밝은 테두리 등의 CSS 속성으로 구현됩니다.
이 글래스모피즘 생성기는 어떻게 사용하나요?
블러 강도 슬라이더를 조절하여 젖빛 유리 효과를 제어하고, 색상 피커와 슬라이더로 배경색과 투명도를 설정하세요. 테두리와 박스 그림자를 활성화/비활성화하고 두께, 색상, 투명도, 반경 등의 매개변수를 세밀하게 조절할 수 있습니다. 실시간 미리보기가 즉시 업데이트되므로 정확한 결과를 확인할 수 있으며, 만족스러우면 생성된 CSS 코드를 스타일시트에 바로 복사하세요.
제 데이터는 안전한가요? 서버로 전송되는 것이 있나요?
네, 데이터는 완전히 안전합니다. 이 도구는 클라이언트 사이드 JavaScript를 사용하여 100% 브라우저에서 실행되며, 어떤 데이터, 설정, 디자인 정보도 서버로 전송되지 않습니다. 모든 CSS 생성, 미리보기 렌더링, 색상 계산이 로컬 기기에서 이루어지므로 기밀 디자인 작업과 클라이언트 프로젝트에도 안전하게 사용할 수 있습니다.
backdrop-filter란 무엇이고 어떻게 작동하나요?
CSS backdrop-filter 속성은 요소 뒤의 영역에 블러, 밝기, 대비 등의 그래픽 효과를 적용합니다. 요소 자체에 영향을 미치는 filter 속성과 달리, backdrop-filter는 요소의 투명하거나 반투명한 배경을 통해 보이는 부분에만 영향을 줍니다. 글래스모피즘에서 backdrop-filter: blur()는 패널 아래의 콘텐츠를 블러 처리하여 젖빛 유리 외관을 만드는 핵심 속성입니다.
글래스모피즘 / backdrop-filter를 지원하는 브라우저는 무엇인가요?
backdrop-filter 속성은 Chrome 76+, Firefox 103+, Safari 9+, Edge 79+ 등 전 세계 브라우저의 95% 이상에서 지원됩니다. Safari는 실제로 -webkit- 접두사와 함께 이를 구현한 최초의 주요 브라우저입니다. 최대 호환성을 위해 -webkit-backdrop-filter와 backdrop-filter 선언을 모두 포함하는 것이 좋으며, 이 생성기는 이를 자동으로 처리합니다.
글래스모피즘은 성능에 어떤 영향을 미치나요?
backdrop-filter 블러는 GPU 합성을 트리거하여 과도하게 사용하면 성능에 영향을 줄 수 있습니다. 블러 처리된 각 요소는 브라우저가 독립적으로 렌더링해야 하는 별도의 합성 레이어를 생성합니다. 원활한 성능을 유지하려면 동시에 보이는 글래스 요소의 수를 제한하고, 적절한 블러 값(8-20px)을 사용하며, 글래스모픽 요소를 중첩하지 않고, 블러 영역이 뷰포트의 과도하게 큰 부분을 차지하지 않도록 하세요.
유리 패널에서 텍스트 가독성을 어떻게 보장하나요?
WCAG 접근성 가이드라인을 충족하려면 텍스트와 유리 배경 사이에 충분한 대비를 확보하세요. 배경 투명도를 높이고(0.3-0.5), 높은 블러 값을 사용하여 하단 콘텐츠의 방해를 줄이며, 미세한 테두리를 추가하여 패널 경계를 명확히 하세요. 밝은 유리 패널에는 어두운 텍스트를, 어두운 유리 패널에는 밝은 텍스트를 사용하고, 다양한 배경 이미지와 색상에서 가독성을 항상 테스트하세요.
코드 예제
function hexToRgba(hex, opacity) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
function generateGlassmorphismCSS(options = {}) {
const {
blur = 10,
bgColor = '#ffffff',
bgOpacity = 0.15,
borderEnabled = true,
borderWidth = 1,
borderColor = '#ffffff',
borderOpacity = 0.2,
borderRadius = 12,
shadowEnabled = true,
shadowX = 0,
shadowY = 4,
shadowBlur = 30,
shadowSpread = 0,
shadowColor = '#000000',
shadowOpacity = 0.1,
} = options;
const rules = [];
rules.push(`background: ${hexToRgba(bgColor, bgOpacity)};`);
rules.push(`-webkit-backdrop-filter: blur(${blur}px);`);
rules.push(`backdrop-filter: blur(${blur}px);`);
if (borderRadius > 0) {
rules.push(`border-radius: ${borderRadius}px;`);
}
if (borderEnabled && borderWidth > 0) {
rules.push(`border: ${borderWidth}px solid ${hexToRgba(borderColor, borderOpacity)};`);
}
if (shadowEnabled) {
rules.push(`box-shadow: ${shadowX}px ${shadowY}px ${shadowBlur}px ${shadowSpread}px ${hexToRgba(shadowColor, shadowOpacity)};`);
}
return rules.join('\n');
}
console.log(generateGlassmorphismCSS());
// background: rgba(255, 255, 255, 0.15);
// -webkit-backdrop-filter: blur(10px);
// backdrop-filter: blur(10px);
// border-radius: 12px;
// border: 1px solid rgba(255, 255, 255, 0.2);
// box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);