https://github.com/livrasand/liquid-glass-css
Apple's Liquid Glass effect for CSS
https://github.com/livrasand/liquid-glass-css
apple css framework liquid-glass
Last synced: 8 months ago
JSON representation
Apple's Liquid Glass effect for CSS
- Host: GitHub
- URL: https://github.com/livrasand/liquid-glass-css
- Owner: livrasand
- Created: 2025-07-03T13:44:19.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-03T23:07:50.000Z (9 months ago)
- Last Synced: 2025-07-28T23:57:29.244Z (8 months ago)
- Topics: apple, css, framework, liquid-glass
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# liquid-glass-css
Apple's Liquid Glass effect for CSS
For best results, I recommend using [Tailwind CSS](https://tailwindcss.com/) and [macOS Tailwind](https://macos-tailwind.netlify.app/?path=/docs/macos-tailwind--docs) for your website designs. You can implement [Liquid Glass CSS](https://github.com/livrasand/liquid-glass-css) simply paste through the GitHub CDN, or you can use [jsDelivr](https://www.jsdelivr.com/):
```html
https://raw.githubusercontent.com/livrasand/liquid-glass-css/refs/heads/main/liquid-glass.js
```
### Usage
Add to any element:
```html
Hover me
```
With macOS Tailwind:
```html
Secondary
```
This is an experimental project for now; depending on the impact on users, improvements will be made and an npm package will be created. and/or I will create my own [macOS Tailwind](https://macos-tailwind.netlify.app/?path=/docs/macos-tailwind--docs) inspired by the new [macOS Tahoe 26](https://www.apple.com/os/macos/) for greater compatibility with this script.