글래스모피즘 생성기

글래스모피즘이란?

글래스모피즘(glassmorphism)은 반투명한 배경과 흐림 효과로 마치 서리 낀 유리(frosted glass)처럼 보이게 하는 디자인 스타일입니다. 반투명 배경색(rgba)과 backdrop-filter의 흐림(blur)·채도(saturate), 그리고 옅은 테두리를 조합해 카드·내비게이션·모달 등에 깊이감과 세련된 느낌을 줍니다. 카드 뒤의 컬러풀한 배경이 은은하게 비쳐 보일 때 가장 효과가 살아납니다.

사용법

• 투명도(%)로 유리 배경이 얼마나 비치는지 조절합니다. 값이 낮을수록 더 투명합니다.
• 흐림(blur)으로 유리 너머가 흐릿해지는 정도를, 채도(saturate)로 뒤 배경 색의 선명함을 조절합니다.
• 테두리 둥글기로 카드 모서리를, 색조로 유리 자체의 색을 지정합니다.
• 미리보기 배경을 바꿔 다양한 배경 위에서 효과를 확인합니다.
• 위쪽 미리보기 카드에서 결과를 즉시 확인하고, CSS 코드를 복사해 적용할 요소에 붙여넣습니다.

코드를 이루는 다섯 줄

출력되는 CSS는 다음 요소로 구성됩니다. 각 줄이 어떤 슬라이더와 연결되는지 알아 두면 나중에 값을 직접 손보기 쉽습니다.

• background — 색조에서 고른 색을 R·G·B로 나눈 뒤 투명도(%)를 소수로 바꿔 rgba로 합칩니다.
• backdrop-filter와 -webkit-backdrop-filter — 흐림과 채도를 blur(…px) saturate(…%) 형태로 담습니다. 사파리를 위해 접두사가 붙은 줄이 항상 함께 나옵니다.
• border-radius — 테두리 둥글기 슬라이더 값이 그대로 들어갑니다.
• border — 흰색에 테두리 투명도(%)를 적용한 1px 선입니다. 유리의 가장자리가 빛에 반사되는 느낌을 냅니다.
• box-shadow — 그림자 사용을 체크했을 때만 아래에 한 줄 더 붙습니다.

배경을 바꿔 가며 확인하기

유리 효과는 뒤에 무엇이 있느냐에 따라 완전히 다르게 보입니다. 미리보기 배경에서 핑크·퍼플·그린, 선셋 오렌지, 스카이 블루, 라벤더 핑크, 다크 틸 다섯 가지 그라데이션을 골라 비교해 볼 수 있고, 내 이미지 업로드를 고르면 실제로 쓸 배경 사진 위에 카드를 얹어 확인할 수 있습니다. 업로드한 이미지는 브라우저 안에서만 읽어 미리보기에 표시하며 서버로 전송되지 않습니다.

활용 예시

• 배경 사진이 깔린 랜딩 페이지의 로그인·문의 카드
• 스크롤해도 위에 떠 있는 반투명 상단 내비게이션 바
• 배경을 어둡게 덮는 대신 흐리게 처리하는 모달·다이얼로그
• 이미지 위에 얹는 가격표·프로필 카드처럼 정보를 겹쳐 보여야 하는 영역
• 음악 플레이어나 위젯처럼 화면 위에 떠 있는 작은 패널

주의점과 팁

• 단색 배경 위에서는 흐릴 대상이 없어 효과가 거의 보이지 않습니다. 사진이나 그라데이션 위에 올려야 살아납니다.
• 투명도를 너무 낮추면 카드 위의 글자가 배경과 섞여 읽기 어려워집니다. 글자 색과 배경의 명암 대비를 함께 확인하세요.
• 흐림 값이 큰 요소를 화면에 여러 개 두면 스크롤이 무거워질 수 있습니다. 꼭 필요한 곳에만 쓰세요.
• 채도를 130~180% 정도로 살짝 올리면 뒤 배경 색이 유리 너머로 더 선명하게 비칩니다.
• Tailwind를 쓴다면 Tailwind 클래스 복사 버튼으로 같은 값을 임의값 유틸리티 클래스 묶음으로 받을 수 있습니다.

자주 묻는 질문

글래스모피즘이란 무엇인가요?

반투명 배경과 흐림 효과로 서리 낀 유리처럼 보이게 하는 디자인 스타일입니다. backdrop-filter의 blur·saturate, 반투명 배경색(rgba), 옅은 테두리를 조합해 표현하며 컬러풀한 배경 위에서 가장 잘 드러납니다.

backdrop-filter가 무엇인가요?

요소 뒤 영역에 흐림(blur), 채도(saturate) 같은 효과를 적용하는 CSS 속성입니다. 유리 너머가 흐릿하게 보이는 핵심 효과를 만들며, 사파리 호환을 위해 -webkit-backdrop-filter도 함께 사용합니다.

일부 브라우저에서 유리 효과가 안 보여요.

backdrop-filter는 비교적 최신 속성이라 구형 브라우저에서 미지원일 수 있습니다. 사파리는 -webkit- 접두사가 필요해 코드에 함께 포함했으며, 미지원 환경에서는 흐림 없이 반투명 배경만 표시됩니다.

만든 효과는 어떻게 사용하나요?

출력된 CSS 코드를 복사해 적용할 요소의 클래스에 붙여넣으면 됩니다. 카드 뒤에 컬러풀한 배경이나 이미지가 있어야 유리 효과가 잘 드러납니다.

배경 이미지를 직접 올려서 볼 수 있나요?

미리보기 배경에서 내 이미지 업로드를 고르면 실제로 쓸 사진 위에 유리 카드를 얹어 확인할 수 있습니다. 이미지는 브라우저 안에서만 읽어 표시하며 서버로 전송되지 않습니다.

Tailwind에서도 쓸 수 있나요?

Tailwind 클래스 복사 버튼을 누르면 배경색, backdrop-filter, 둥글기, 테두리, 그림자를 임의값 유틸리티 클래스 묶음으로 바꿔 복사합니다.

글자가 잘 안 보이는데 어떻게 하나요?

투명도를 조금 올려 유리를 더 불투명하게 만들거나, 흐림 값을 키워 뒤 배경의 무늬를 줄이면 읽기 쉬워집니다. 글자 색과 배경의 명암 대비도 함께 확인하세요.

업로드한 이미지나 설정이 저장되나요?

저장되지 않습니다. 모든 처리는 브라우저 안에서 이루어지고 값과 이미지가 서버로 전송되지 않으며, 새로고침하면 기본값으로 돌아갑니다.