Liquid Glass CSS는 HTML 요소에 애플 스타일의 굴절되는 액체 유리 효과와 액체 왜곡 효과를 적용하는 경량 JavaScript/CSS 라이브러리입니다.
# 라이센스
MIT
# 무엇을 할 수 있나?
배경이 굴절되는 듯한 리퀴드/글래스 효과가 있는 카드, 버튼, 오버레이 등 현대적인 UI 스타일을 쉽게 구현할 수 있습니다.
# Liquid Glass 디자인이란?
Liquid Glass는 Glassmorphism(반투명 블러 기반 UI)에서 더 발전한 개념으로, 실시간 굴절·반사 효과와 깊이감을 주는 첨단 인터페이스 스타일입니다. Apple도 iOS 26부터 Liquid Glass 스타일을 도입했습니다.
# 특징
- SVG 변위 필터 : 유기적인 "액체" 굴절 효과를 만들기 위해 feTurbulence사용 합니다.feDisplacementMap
- 유틸리티 클래스 API : .liquidGlass, .liquidGlassLarge, .liquidBtn, 및 와 같은 클래스를 사용하여 효과를 적용합니다 .blur-[0-10].
- 동적 색조 부여data-hue : 요소는 속성과 클래스를 통해 주변 환경의 색조를 상속받을 수 있습니다 .dynamicHue.
|
