🫧 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.

<!-- Basic glass panel -->
<LiquidGlass class="rounded-[50px]" blur={0} chromaticAberration={2}>
  <div class="p-8 text-4xl font-bold text-white">
    Your content here
  </div>
</LiquidGlass>

<!-- Glass with animated background -->
<LiquidGlass
  class="rounded-[50px]"
  background="/assets/chrome1.png"
  blur={0}
  chromaticAberration={2}
>
  <div class="p-8 text-6xl font-black text-white">
    Animated Background
  </div>
</LiquidGlass>

<!-- Button style -->
<LiquidGlass class="rounded-[30px]" color="black" chromaticAberration={2} button>
  <a href="/link" class="px-8 py-4 text-xl text-white">Click Me</a>
</LiquidGlass>

<!-- Inline usage -->
<p>
  This is an
  <LiquidGlass class="rounded-full" chromaticAberration={2} button inline>
    <span class="px-2 py-0.5 text-sm text-white">inline glass</span>
  </LiquidGlass>
  element.
</p>

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

# Clone the repository
git clone https://github.com/nikdelvin/liquid-glass.git

# Install dependencies
npm install

# Start development server
npm run dev

---

🌐 Browser Support

Browser	Support
Chrome 76+	✅ Full
Firefox 103+	✅ Full
Safari 15+	⚠️ Partial (auto-fallback to glassmorphism)
Edge 79+	✅ Full

Safari automatically falls back to a blurred glassmorphism effect when backdrop-filter: url() is not supported.

---

📁 Project Assets

Background images and textures in /public/assets/:

public/
└── assets/
    ├── background.webp          # Default background
    ├── chrome1.png, chrome2.png, chrome3.png
    ├── rocks1.png, rocks2.png, rocks3.png
    ├── silk1.png, silk2.png, silk3.png
    ├── lines1.svg, lines2.svg, lines3.svg
    ├── displacement-map-*.png   # Displacement textures
    └── specular-map-*.png       # Specular textures

---

🛠️ Tech Stack

• Astro - Static site generator
• Tailwind CSS - Utility-first CSS
• Anime.js - Animation library for background effects
• SVG Filters - feDisplacementMap, feGaussianBlur, feColorMatrix
• CSS backdrop-filter

---

📄 License

MIT © Nik Delvin

---

Made with 🫧 by Nik Delvin