[해피CGI][cgimall] Liquid Glass CSS 프레임워크

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.

- 라이트 모드 지원 : 이 .glassLightMode수정자는 밝은 배경에서 텍스트를 검정색으로 바꾸고 깊이 그림자를 제거합니다.


# 참고
원본 사이트에서 자료를 다운로드 받으면 샘플 파일이 없습니다. ( index.html )
본 사이트에 첨부된 압축 파일에는 바로 확인할 수 있도록 index.html 을 첨부해 두었으니 참고 바랍니다.

설치 방법 및 옵션, 이벤트 등에 대한 정보는 https://www.cssscript.com/glassmorphism-liquid-glass-framework/ 에서 확인 가능합니다.