글래스모피즘 생성기

요즘 유행하는 글래스모피즘, 1분 만에 구현하세요. 흐림 효과와 투명도를 조절해 나만의 유리 질감을 만듭니다.

Presets

흐림 정도10px

투명도25%

채도180%

테두리 투명도18%

배경 색상

CSS 코드

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);

미리보기

글래스모피즘

유리처럼 투명하고 흐릿한 효과를 주는 모던한 디자인 트렌드입니다.

팁: Safari에서는 -webkit-backdrop-filter가 필요합니다. 생성된 코드에 포함되어 있습니다!

글래스모피즘(Glassmorphism) 생성기

최신 UI 트렌드인 '유리 같은 질감'을 표현하는 CSS 코드를 생성하는 도구입니다. 배경을 흐리게 처리하는 backdrop-filter 속성을 활용하여 세련되고 현대적인 디자인 요소를 만들 수 있습니다.

1이 도구는 언제 쓰나요?

💡최신 트렌드의 웹사이트를 디자인할 때

💡세련된 카드 UI나 모달 창을 만들 때

💡배경 이미지가 비치는 투명한 패널이 필요할 때

2주요 기능

실시간 비주얼 에디터
크로스 브라우징 지원 코드 생성 (-webkit 포함)
배경 이미지 위에서의 미리보기 제공
모던한 카드 UI 템플릿 제공

3사용 방법

흐림(Blur)과 투명도(Transparency)를 조절하여 유리 질감을 만드세요.
배경색과 테두리를 미세 조정하세요.
완성된 CSS 코드를 복사하여 프로젝트에 적용하세요.

자주 묻는 질문

Q. 모든 브라우저에서 지원되나요?

A. 최신 크롬, 사파리, 엣지 등 대부분의 모던 브라우저에서 지원됩니다. 단, 구형 IE에서는 작동하지 않습니다.

🚀 Pockit 크롬 확장프로그램 공식 출시Chrome

100% 프라이버시 보장