언제 유용한가요?
모달, 카드, 알림창처럼 배경 위에 떠 있는 느낌을 주고 싶은 UI 요소에 세련된 유리 질감을 입히고 싶을 때 유용합니다.
Glassmorphism Generator
Create translucent glass UI CSS with blur controls.
Glass
사용 가이드
글래스모피즘 생성기 사용 가이드
글래스모피즘 생성기는 블러, 투명도, 테두리 밝기를 조절해 반투명 유리 질감의 UI 배경 CSS를 만들어주는 도구입니다.
사용 방법
- 블러 슬라이더로 뒤쪽 배경이 얼마나 흐려 보일지 정합니다.
- 투명도 슬라이더로 유리 표면의 배경색 농도를 조절합니다.
- 테두리 밝기를 조절한 뒤 생성된 CSS를 복사합니다.
알아두면 좋은 점
글래스모피즘 효과는 backdrop-filter 속성을 사용하므로, 이를 지원하지 않는 아주 오래된 브라우저에서는 흐림 효과 없이 반투명 배경만 보일 수 있습니다.
데이터 처리 안내
생성 과정은 브라우저 안에서만 이루어지며 입력한 값이 서버로 전송되지 않습니다.
자주 묻는 질문
backdrop-filter가 안 되는 브라우저도 있나요?
네, 오래된 브라우저 중 일부는 backdrop-filter를 지원하지 않습니다. 이 경우 흐림 효과 없이 반투명 배경만 나타나므로, 주요 대상 브라우저의 지원 여부를 확인하는 것이 좋습니다.
배경색을 유리 외에 다른 색으로 바꿀 수 있나요?
네, 생성된 CSS 코드에서 배경색 값을 원하는 색으로 직접 바꾸면 같은 유리 질감을 다른 색조로 응용할 수 있습니다.