{"repo":"nikdelvin/liquid-glass","free":true,"listed":false,"github":"https://github.com/nikdelvin/liquid-glass","clone":"git clone https://github.com/nikdelvin/liquid-glass.git","description":"🫧 Pixel-perfect recreation of Apple's iOS 26 Liquid Glass effect using only CSS and SVG filters. Includes LiquidGlass containers, LiquidText, and LiquidButton components.","language":"Astro","stars":88,"topics":["apple","astro","css-effects","glassmorphism","ios","ios-26","liquid-glass","refraction","svg-filters","ui-components"],"license":"MIT","category":"mobile-apps","readme_excerpt":"🫧 Liquid Glass iOS 26 Liquid Glass effect recreated for the web using pure CSS SVG filters. --- ✨ Features - 🎨 Pure CSS SVG Filters - Displacement mapping with backdrop-filter - 🔮 Realistic Refraction - Dynamic displacement creates authentic glass distortion - 🌈 Chromatic Aberration - RGB color splitting for that premium glass look - ⚡ Performant - GPU-accelerated CSS transforms and filters - 📱 Responsive - Auto-sizing components that scale beautifully - 🍎 Safari Fallback - Automatic graceful degradation with glassmorphism mode - 🎬 Animated Backgrounds - Optional spinning background images with hover control --- 🧩 Components LiquidGlass A versatile container with liquid glass refraction effect. Can be used for cards, panels, hero sections, inline elements, and buttons. Prop Type Default Description ------ ------ --------- ------------- class string — CSS classes (use for border-radius, etc.) depth number 10 Edge refraction depth strength number 100 Displacement filter strength blur number 0 Blur amount chromaticAberration number 0 RGB split intensity color 'black' \\ 'white' — Glass tint color background string — Background image URL (enables spinning animation) freeze true — Disable background spin animation noMorph true — Disable Safari glassmorphism fallback button true — Enable button styling with hover effects inline true — Render as inline element (span) --- 🚀 Quick Start --- 🌐 Browser Support Browser Support --------- --------- Chrome 76+ ✅ Full Firefox 103+ ✅","default_branch":null,"files":null,"tree":[],"storefront":"/r/nikdelvin","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/nikdelvin/liquid-glass/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}