CSS로 구현한 Liquid Glass
(atlaspuplabs.com)- Apple이 WWDC25에서 공개한 Liquid Glass 디자인 언어의 핵심 효과를 CSS와 SVG 필터 조합으로 재현하는 방법
- Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration 등 실제 유리 재질을 모방하는 다양한 레이어를 단계별로 CSS/SVG로 구현
- 주요 효과 구현에는 backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend 등 고급 CSS·SVG 기술 사용
- 브라우저 호환성은 Chrome 중심이며, Safari/Firefox에서는 SVG 필터가 동작하지 않아 Blur·Shadow만 적용됨
- 복잡한 효과일수록 GPU 사용량이 크고, UI 전반에 남용 시 성능 저하가 발생할 수 있어 핵심 영역 위주 사용 권장
Liquid Glass란?
- Apple의 최신 디자인 언어로, 실제 유리처럼 빛의 반사·굴절, 색 변화, 입체감을 모방한 고급 그래픽 효과를 지향함
- UI 요소에 깊이감과 생동감을 더하는 데 활용되며, 시각적으로 매끄럽고 물리적 감촉을 연상시키는 특징이 있음
효과의 주요 레이어 및 구현 방법
1. Specular Highlights(유리의 반사광)
- 유리 가장자리에 하이라이트를 추가해 깊이와 입체감을 강조함
- CSS의 inset box-shadow 여러 개를 중첩 적용해, 각도별로 빛이 반사되는 느낌을 표현
box-shadow: inset 10px 10px 20px rgba(153, 192, 255, 0.1), inset 2px 2px 5px rgba(195, 218, 255, 0.2), inset -10px -10px 20px rgba(229, 253, 190, 0.1), inset -2px -2px 30px rgba(247, 255, 226, 0.2); - [Fresnel Effect]를 참고해, 빛의 반사 강도를 자연스럽게 조정함
2. Blur(배경 블러)
- 유리 뒤쪽 콘텐츠에만 블러를 적용하기 위해 backdrop-filter: blur(20px); 사용
- 실제 요소 자체가 아닌, 배경 콘텐츠에만 효과가 적용됨
3. Color Filter(색상 강조)
-
contrast(80%) saturate(120%) 등의 backdrop-filter를 추가로 적용해, 유리 뒤 콘텐츠의 채도 증가·대비 감소로 선명한 색감 구현
backdrop-filter: blur(20px) contrast(80%) saturate(120%);
4. 굴절(Refraction) 시뮬레이션
-
유리의 곡면이 배경을 비틀어 보이게 하는 굴절 효과는 CSS 단독으론 구현 한계가 있어, SVG 필터와 결합하여 구현
-
Displacement Map: SVG의 gradient를 활용해, 가장자리에선 픽셀을 압축하고 중앙부는 늘어나는 왜곡 맵(Identity Map)을 생성
- 예시 SVG의 빨간/파란 그라디언트로 X/Y 방향 픽셀 이동량을 정의
- 그라디언트 ramp를 조절해 가장자리 압축·중앙 확장 패턴을 설계
- SVG를 Data URL로 변환해 feImage로 로드, feDisplacementMap에서 좌표 변형에 활용
-
Ripple Distortion: feTurbulence(노이즈 텍스처)와 추가 feDisplacementMap 조합으로 유리 표면의 미세한 파동까지 묘사
-
Chromatic Aberration(색수차): feColorMatrix, feOffset, feBlend 조합으로 RGB 각 채널을 분리·오프셋 후 합성하여, 실제 유리에서 관찰되는 빛 분산 효과 모방
CSS/SVG 효과 적용 방법
- SVG filter를 정의한 후, filter: url(#filterId); 를 활용해 DOM 요소에 적용
- 모든 효과가 결합된 필터 체인은 실제 유리 패널같은 질감·빛 왜곡·색상 변조를 동시에 재현함
호환성 및 성능 주의점
- SVG displacement filter는 Chrome에서만 정상 지원. Safari, Firefox 등에서는 효과가 제한됨(Blur/Shadow만 남음)
- Glass 요소가 많거나 애니메이션 적용 시 GPU 부하가 크고, 렌더링 성능 저하 발생
- 현실적으로는 Hero/Feature 영역 등 강조가 필요한 일부 UI에만 사용하는 것이 적합함
참고 및 크레딧
- 본 구현법은 Smashing Magazine의 "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering"과 Apple Liquid Glass 공식 문서에 기반함
- SVG displacement, CSS backdrop-filter, box-shadow 등 최신 웹 기술의 조합적 활용이 핵심임