liquid-glass-os

BY @GLO — 14 DOWNLOADS — UI

Use when building any UI — web pages, iOS views, components, layouts, dashboards, forms, or styling. Applies the liquid glass design system to all frontend work including HTML, CSS, Tailwind, SwiftUI, and UIKit.

\u2606 0 DOWNLOAD ALL (.ZIP) SKILL.MD TAR.GZ V1.0.0

CLI INSTALL

curl -sS https://dem0n.vip/s/glo/liquid-glass-os/SKILL.md -o ~/.claude/skills/liquid-glass-os/SKILL.md --create-dirs

DOWNLOAD ALL gives you a single .zip containing SKILL.md + the tar.gz — drag it into Claude Code in one go.

Sign up to see the full skill

Get the source, install command, comments, and version history

GET AN INVITE

Liquid Glass OS

x0

The foundation. Near-black base #050507. No solid backgrounds. No heavy shadows. No noise overlays. Glass IS the decoration.

ang3l

Every single interactive UI element gets translucent glass treatment — cards, buttons, inputs, bubbles, modals, nav bars, everything.

Core Rules

Glass on everything interactive
Outline-only icons with animated gradient overlays
Ultra-minimal empty states: one uppercase word, ultralight font
Remove avatars, labels, noise textures
Tight and breathable spacing
Animated flowing mesh gradients as backgrounds

iOS

Element	Treatment
Background	`MeshGradient` — animated, flowing
Glass	Native `.glassEffect()` on all interactive elements
Active icons	Animated `AngularGradient` tracing
Buttons	Interactive bounce + shimmer
Tab bars	Floating icons only, no labels
Empty states	One uppercase word, `.ultraLight` font

Web

Element	Treatment
Background	Animated CSS gradients on `#050507` base
Glass	`backdrop-filter: blur(40px)`, `rgba(255,255,255,0.04)` to `0.06` fill
Icons	Outline-only, animated gradient overlay via `background-clip: text`
Spacing	Tailwind utilities, tight but breathable
Shadows	None. Glass blur IS the depth cue
Borders	`1px solid rgba(255,255,255,0.08)` max

Quick Reference — Tailwind Tokens

bg:        bg-[#050507]
glass-bg:  bg-white/[0.04] to bg-white/[0.06]
blur:      backdrop-blur-[40px]
border:    border-white/[0.08]
text:      text-white, text-white/60 (secondary)
empty:     text-xs uppercase tracking-[0.2em] font-extralight text-white/30

What NOT to Do

No solid background colors on interactive elements
No box-shadow for depth — use blur only
No noise/grain texture overlays
No avatar images
No text labels on icon bars
No heavy borders or dividers

BADGE

![downloads](https://dem0n.vip/s/glo/liquid-glass-os/badge.svg)

VERSIONS

1.0.0 — 1.5 KB — b5fff78055df