Z1Code

Z1Code / glass-refraction

Public

Liquid Glass design system — CSS + React components with SVG refraction, specular highlights, and chromatic edge dispersion

glass ios26 liquid ui uiux
31
0
100% credibility
Found Feb 11, 2026 at 22 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A design system offering CSS styles and React components to add realistic frosted glass effects with refraction, highlights, and edge dispersion to web interfaces.

How It Works

1
🔍 Discover Liquid Glass

You stumble upon this cool design pack while searching for ways to make your website look like it has shiny, frosted glass overlays just like fancy apps.

2
📦 Add to Your Project

You easily bring the glass styles into your website project so they're ready to use.

3
Pick Your Way to Use It
🎨
Style Names Only

Sprinkle special style names on your page elements for quick glass effects anywhere.

⚛️
Ready-Made Pieces

Drop in pre-built glass blocks like nav bars, cards, and badges that work perfectly.

4
✨ Add Magic Filters

Place a hidden magic layer once in your site to make the glass bend light realistically.

5
🪞 Create Glass Elements

Build your navbar, content cards, and tags with the frosted glass shine, shimmer, and colorful edges that lift and glow on hover.

6
🎨 Tweak the Look

Adjust the blur, colors, and glow to perfectly match your site's style and feel.

✅ Gorgeous Glass Site

Your website now sparkles with lifelike liquid glass effects, making it feel modern and premium.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 22 to 31 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is glass-refraction?

Glass-refraction delivers a Liquid Glass design system via TypeScript-built CSS classes and React components, replicating Apple's WWDC 2025 aesthetic with SVG-based glass refraction, specular highlights, and chromatic edge dispersion. Developers drop it into any project for frosted glass effects on navbars, cards, and badges—no custom glass refraction css or shaders needed. It solves the hassle of faking realistic liquid glass design in web UIs, supporting CSS-only imports or React wrappers with backdrop-filter blurs.

Why is it gaining traction?

Unlike basic glassmorphism kits, it nails advanced effects like animated shimmers, hover lifts, and edge dispersion, drawing from kube.io's SVG refraction research and evoking github liquid glass swift or liquid glass ios vibes. Customizable via CSS variables for blur, saturation, and colors, it tiers effects for dense overlays or subtle pills. The hook: instant polish for hero sections without Photoshop-style glass refraction effect tweaks or Blender shaders.

Who should use this?

Frontend devs crafting iOS-inspired dashboards, landing pages, or apps with liquid glass einstellen needs, especially those eyeing github liquid crystal or liquid glass iphone trends. Suited for React/Next.js teams wanting quick navbar and card upgrades, or vanilla HTML projects avoiding heavy libraries.

Verdict

Grab it for prototypes if Apple's liquid glass ios 26 style fits your brief—docs and examples are solid despite 14 stars and 1.0% credibility score signaling early maturity. Skip for production until more adoption confirms cross-browser stability.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.