21. 리퀴드글래스
- 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 사용
- Safari/Firefox에서는 SVG 필터가 동작하지 않아 Blur·Shadow만 적용
- 복잡한 효과일수록 GPU 사용량이 크고, UI 전반에 남용 시 성능 저하가 발생할 수 있어 핵심 영역 위주 사용 권장
- 생성기: https://liquid-glass-eta.vercel.app/