글래스모피즘(Glassmorphism)이란? CSS로 투명한 유리 효과 구현하기
CSS 26.11.06 조회 40글래스모피즘(Glassmorphism)이란? CSS로 투명한 유리 효과 구현하기
최근 웹 디자인에서는 투명한 소재와 빛의 반사, 흐릿한 배경을 활용한 인터페이스를 자주 볼 수 있습니다.
이러한 디자인 스타일을 글래스모피즘(Glassmorphism)이라고 합니다.
글래스모피즘은 유리처럼 투명하면서도 반투명한 표면과 블러 효과를 활용해 깊이감과 입체감을 표현하는 디자인 기법입니다.
이번 글에서는 글래스모피즘의 개념과 최근 다시 주목받는 이유를 살펴보고, Figma의 Glass Effect 시안을 CSS로 구현한 실제 사례를 소개하겠습니다.
➰➰➰
✅ 글래스모피즘(Glassmorphism)이란?
✅ 글래스모피즘이 다시 주목받는 이유는?
✅ Figma Glass Effect는 어떻게 설정할까?
설정 항목 |
적용값 |
의미 |
Light |
-45° / 80% |
빛이 들어오는 방향과 강도 |
Refraction |
80 |
빛의 굴절 정도 |
Depth |
20 |
유리 표면의 깊이감 |
Dispersion |
50 |
빛의 색상 분산 정도 |
Frost |
4 |
배경이 흐려지는 정도 |
다만 Figma의 Glass Effect와 CSS는 렌더링 방식이 다르기 때문에 설정값을 그대로 CSS 속성에 대입할 수는 없습니다.
따라서 CSS에서는 배경 투명도, 블러, 그림자, 그라데이션 등을 조합해 유사한 시각적 효과를 구현할 수 있습니다.
✅ CSS로 글래스모피즘 구현하기
CSS에서 글래스모피즘을 구현할 때 핵심적으로 사용하는 속성은 다음과 같습니다.
✨ backdrop-filter
: backdrop-filter는 요소 뒤에 있는 영역에 블러나 색상 필터를 적용하는 CSS 속성입니다.
1 2 3 4 5 | .glass { background-color: rgba(255, 255, 255, 0.5); /* 배경이 은은하게 비치도록 합니다. */ backdrop-filter: blur(4px) saturate(120%); /* 배경의 흐림 처리와 채도 조절을 통해 선명하게 보이도록 합니다. */ -webkit-backdrop-filter: blur(4px) saturate(120%); } | cs |
✨ box-shadow
: 유리 표면은 빛을 반사하기 때문에 단순한 투명 배경만으로는 입체감이 부족할 수 있습니다.
: 이때 box-shadow를 활용하면 외부 그림자와 내부 하이라이트를 동시에 표현할 수 있습니다.
: inset을 사용하면 그림자가 요소 내부에 적용되므로 유리의 가장자리에서 빛이 반사되는 듯한 효과를 만들 수 있습니다.
1 2 3 4 5 6 | .glass { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), /* 외부에 부드러운 그림자를 적용해 배경과 분리합니다. */ inset 0 1px 2px rgba(255, 255, 255, 0.3), /* 상단 내부에 밝은 하이라이트를 추가합니다. */ inset 0 -1px 2px rgba(255, 255, 255, 0.3); /* 하단에도 은은한 빛을 넣어 유리 표면의 입체감을 표현합니다. */ } | cs |
✨ ::before와 radial-gradient로 테두리 구현하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .glass::before { --glow: .9; --hd: 48px; content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; background: radial-gradient( /* 좌측 상단과 우측 하단에 빛이 맺히는 듯한 하이라이트를 만듭니다. */ circle calc(var(--hd) * .6) at calc(var(--hd) * .15) calc(var(--hd) * .15), rgba(255,255,255,var(--glow)) 0, rgba(255,255,255,calc(var(--glow) * .5)) 35%, rgba(255,255,255,0) 100% ), radial-gradient( /* 좌측 상단과 우측 하단에 빛이 맺히는 듯한 하이라이트를 만듭니다. */ circle calc(var(--hd) * .6) at calc(100% - var(--hd) * .15) calc(100% - var(--hd) * .15), rgba(255,255,255,var(--glow)) 0, rgba(255,255,255,calc(var(--glow) * .5)) 35%, rgba(255,255,255,0) 100% ), linear-gradient( /* 전체 테두리에 은은한 흰색 광택을 더합니다. */ rgba(255,255,255,calc(var(--glow) * .1)), rgba(255,255,255,calc(var(--glow) * .1)) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; /* 내부 영역을 제외해 테두리 부분만 보이도록 처리합니다.*/ } | cs |
⚠️ 글래스모피즘 구현 시 주의사항
글래스모피즘은 시각적으로 매력적인 효과지만 실제 웹사이트에 적용할 때는 몇 가지 고려할 사항이 있습니다.
1) 텍스트 가독성 확보
배경이 투명하기 때문에 뒤쪽 이미지나 색상에 따라 텍스트의 가독성이 달라질 수 있습니다.
배경 투명도와 텍스트 색상을 적절하게 조절하고, 다양한 배경에서 충분한 대비가 유지되는지 확인해야 합니다.
2) 배경 콘텐츠 확인
backdrop-filter는 뒤쪽 콘텐츠가 있어야 효과가 드러납니다.
단색 배경에서는 블러 효과가 눈에 띄지 않을 수 있으므로 이미지나 그라데이션이 있는 영역에서 테스트하는 것이 좋습니다.
3) 브라우저 호환성 확인
backdrop-filter는 최신 주요 브라우저에서 지원되지만 구형 브라우저나 일부 환경에서는 정상적으로 표시되지 않을 수 있습니다.
필요하다면 @supports를 활용해 지원 여부에 따른 대체 스타일을 제공하는 것이 좋습니다.
