유리모피즘 생성기
실시간 미리보기로 유리 효과 CSS를 만듭니다.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
추천 도구
유용할 수 있는 엄선된 도구
CSS로 서리유리(글래스모피즘) 효과 만들기
소개
글래스모피즘은 서리유리 느낌 — 배경이 은은하게 비치는 반투명·흐림 패널 — 으로, 현대 운영체제가 대중화했습니다. CSS로 재현하려면 배경 투명도, 배경 블러, 은은한 테두리, 그림자를 딱 맞게 조합해야 합니다. 이 생성기는 각 부분을 실시간 미리보기로 조정하고 정확한 CSS를 복사해 줘, 시행착오 없이 효과를 얻습니다.
사용 방법 (단계별)
- 1
투명도와 블러 설정
배경 불투명도와 배경 블러를 조정해 유리가 얼마나 서린 듯 보일지 조절합니다.
- 2
테두리와 그림자 조정
은은한 밝은 테두리와 부드러운 그림자를 더해 패널에 유리 같은 가장자리와 깊이를 줍니다.
- 3
CSS 복사
생성된 규칙을 요소에 붙여넣습니다 — 효과를 보려면 컬러풀하거나 이미지 배경 위에 두세요.
작동 원리
이 효과는 몇 가지 CSS 속성을 겹칩니다: 반투명 배경색, 요소 뒤에 있는 것을 흐리게 하는 backdrop-filter: blur(), 유리의 '가장자리'를 잡아주는 얇은 밝은 테두리, 깊이를 위한 부드러운 그림자. 배경 위 미리보기가 결과를 보여주는 동안 블러·투명도·색을 슬라이더로 조정한 뒤, 생성된 규칙을 스타일시트에 복사합니다.
이럴 때 쓰세요
컬러풀한 배경이나 이미지 위에 떠 있는 카드·내비바·모달을 디자인할 때. UI에 현대적이고 층층이 쌓인 깊이를 줄 때. iOS나 Windows의 서리 패널 스타일을 맞출 때. 뒤 콘텐츠를 보여주면서도 읽기 쉬운 오버레이를 만들 때. 코드로 확정하기 전에 유리 효과를 프로토타이핑할 때. backdrop-filter와 투명도가 어떻게 결합되는지 배울 때.
자주 묻는 질문
backdrop-filter는 요소 뒤 콘텐츠만 흐리게 하므로, 뒤에 컬러풀한 것이나 이미지가 필요합니다 — 순백 배경 위엔 흐릴 게 없습니다. 또한 요소 배경이 단색이 아니라 반투명인지 확인하세요.
주의사항
backdrop-filter는 GPU를 많이 씁니다. 한 페이지에 유리 패널이 많으면, 특히 애니메이션이나 스크롤 시 저사양 기기에서 렌더링이 느려질 수 있습니다. 핵심 요소에만 아껴 쓰세요.