https://github.com/henryoman/water
Open-source framework agnostic tailwind library that mimics Apple Liquid Glass but expands even further on it
https://github.com/henryoman/water
apple css glass glassmorphism liquid tailwindcss ui-design
Last synced: 4 months ago
JSON representation
Open-source framework agnostic tailwind library that mimics Apple Liquid Glass but expands even further on it
- Host: GitHub
- URL: https://github.com/henryoman/water
- Owner: henryoman
- Created: 2025-06-15T04:54:54.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-15T06:18:03.000Z (4 months ago)
- Last Synced: 2025-06-15T06:19:36.917Z (4 months ago)
- Topics: apple, css, glass, glassmorphism, liquid, tailwindcss, ui-design
- Language: TypeScript
- Homepage: https://github.com/henryoman/Water
- Size: 3.98 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
water
Liquid-Glass utilities & tokens for Tailwind CSS v4.
One preset — works in **React, Vue, Svelte, Astro, plain HTML** (anything that runs Tailwind).
---
## ✨ Features
| What you get | Class | CSS cost |
|--------------|-------|----------|
| GPU-blurred, saturated “glass” panel | `.glass` | backdrop-blur + edge sheen |
| Widget block (no blur, axial gradient) | `.widget` | dual-tone gradient + rim |
| Icon / tile with dual rim | `.tile` | razor rim + inner glow |
| Design tokens | `--glass-*`, `--widget-*` | tweak in one place |
No React dependency, no JS bundles, < **3 kB** minified.
---
## 🔧 Installation
```bash
bun add -D @your-scope/glass-preset # bun
# npm install -D @your-scope/glass-preset
# pnpm add -D @your-scope/glass-preset