글래스모피즘 카드 생성기
블러·투명도로 반투명 유리 카드 CSS를 만들어 바로 복사
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
배경 블러, 투명도, 채도, 테두리, 그림자를 슬라이더로 조절하며 반투명 유리 질감의 카드를 실시간 미리보기로 확인할 수 있는 도구입니다. 웹 디자이너나 프론트엔드 개발자가 글래스모피즘(Glassmorphism) 스타일의 UI 컴포넌트를 빠르게 실험하고 CSS 코드를 바로 가져다 쓸 때 유용합니다. 모든 계산과 미리보기는 브라우저에서만 이뤄지고 서버로 전송되는 데이터는 없습니다.
사용 방법
- 6가지 배경 그라디언트 프리셋 중 하나를 선택합니다.
- 흐림, 배경 불투명도, 채도, 모서리 둥글기, 테두리 두께·불투명도, 안쪽 여백 슬라이더를 조절합니다.
- 색상 피커로 카드의 틴트 색을 지정하고 그림자 사용 여부를 체크합니다.
- 미리보기가 원하는 느낌이 되면 하단의 CSS 코드를 복사 버튼으로 그대로 가져갑니다.
자주 묻는 질문
- 생성된 CSS는 어떤 브라우저에서 잘 보이나요?
- backdrop-filter를 지원하는 최신 크롬, 엣지, 사파리, 파이어폭스에서 정상 작동합니다. 사파리를 위해 -webkit-backdrop-filter 접두사도 함께 생성됩니다.
- 카드가 흐릿하게만 보이고 유리 효과가 안 느껴져요.
- backdrop-filter는 카드 '뒤'에 있는 배경을 흐리게 비추는 효과라서, 카드 뒤에 색이나 이미지가 있는 화려한 배경이 있어야 유리 느낌이 살아납니다.
- 생성한 CSS 그대로 실제 프로젝트에 써도 되나요?
- 네, 별도 라이선스 표기 없이 복사한 CSS를 프로젝트에 자유롭게 사용할 수 있습니다.