Playground · 12 demos
CSS Glassmorphism Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Glassmorphism collection for the gallery view with code panels.
01 Pure CSS
Glass Card
The canonical glass surface — translucent white over a vivid aurora gradient. Backdrop-filter blur is what sells the effect.
Open
02 Pure CSS
Frosted Modal
A heavy-blur dialog floating over a busy backdrop — the modal pattern that finally makes sense in 2024+ browsers.
Open
03 Pure CSS
Pricing Glass
Tiered pricing card with featured glass treatment — the middle plan reads "premium" through stronger glass + brighter rim.
Open
04 Pure CSS
Glass Navbar
Sticky navbar that stays translucent over any page background — backdrop-filter saturate boosts the colors behind to keep contrast.
Open
05 Pure CSS
Glass Tab Bar
Bottom navigation bar (mobile-app pattern) where the active pill is a brighter glass surface inside a darker glass container.
Open
06 Pure CSS
Glass Sidebar
Vertical glass sidebar with active-item highlight — the classic dashboard chrome reimagined as a single semi-transparent panel.
Open
07 Pure CSS
Glass Input
Translucent text input with a subtle inner glow on focus — useful when a form sits over imagery or a video background.
Open
08 Pure CSS
Glass Toggle
Frosted iOS-style toggle switch sitting over a vivid backdrop — the thumb is a brighter glass island inside the track.
Open
09 Pure CSS
Glass Search
A frosted search field with a built-in icon — the kind of search bar that hovers over a hero image or video without competing.
Open
10 Pure CSS
Refraction Card
Glass card with a fake refraction edge — a brighter rim on one side simulates how real glass bends light at its boundary.
Open
11 Pure CSS
Tinted Glass
Each glass surface tints subtly with its own brand hue while sharing the same blur — useful for color-coded categories.
Open
12 Pure CSS
Stacked Glass
Three glass layers stacked at offset depths — each pane blurs the panes behind it, creating a dimensional sandwich effect.
Open