12 CSS Glassmorphism Designs

glassmorphism design-styles css-only

CSS glassmorphism is a frosted-glass surface effect popularised by macOS Big Sur and iOS Control Center. These 12 hand-coded designs are ready-to-ship glass panels for cards, navigation bars, modals, and hero overlays — copy the markup, place over your background, and ship.

12 unique surfaces 100% copy-paste ready Published May 4, 2026

01 / 12

Glass Card

Pure CSS

The canonical glass surface — translucent white over a vivid aurora gradient.

Live Demo Try it

02 / 12

Frosted Modal

Pure CSS

A heavy-blur dialog floating over a busy backdrop — the modal pattern that finally makes sense in 2024+ browsers.

Live Demo Try it

03 / 12

Pricing Glass

Pure CSS

Tiered pricing card with featured glass treatment — the middle plan reads "premium" through stronger glass + brighter rim.

Live Demo Try it

04 / 12

Glass Navbar

Pure CSS

Sticky navbar that stays translucent over any page background — backdrop-filter saturate boosts the colors behind to keep contrast.

Live Demo Try it

05 / 12

Glass Tab Bar

Pure CSS

Bottom navigation bar (mobile-app pattern) where the active pill is a brighter glass surface inside a darker glass container.

Live Demo Try it

06 / 12

Glass Sidebar

Pure CSS

Vertical glass sidebar with active-item highlight — the classic dashboard chrome reimagined as a single semi-transparent panel.

Live Demo Try it

07 / 12

Glass Input

Pure CSS

Translucent text input with a subtle inner glow on focus — useful when a form sits over imagery or a video background.

Live Demo Try it

08 / 12

Glass Toggle

Pure CSS

Frosted iOS-style toggle switch sitting over a vivid backdrop — the thumb is a brighter glass island inside the track.

Live Demo Try it

09 / 12

Glass Search

Pure CSS

A frosted search field with a built-in icon — the kind of search bar that hovers over a hero image or video without competing.

Live Demo Try it

10 / 12

Refraction Card

Pure CSS

$Refraction Card — preview$

Glass card with a fake refraction edge — a brighter rim on one side simulates how real glass bends light at its boundary.

Live Demo Try it

11 / 12

Tinted Glass

Pure CSS

Each glass surface tints subtly with its own brand hue while sharing the same blur — useful for color-coded categories.

Live Demo Try it

12 / 12

Stacked Glass

Pure CSS

Three glass layers stacked at offset depths — each pane blurs the panes behind it, creating a dimensional sandwich effect.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Glassmorphism Generator

Tune blur, saturation, tint and border in real time, then copy.

Generator

CSS Filter Generator

Stack backdrop-filter blurs, saturate, and hue-shift visually.

Generator

CSS Box Shadow Generator

Pair the glass with a soft outer shadow for proper lift.

FAQ

Frequently asked questions

How do I create a glassmorphism effect in CSS?

The core is backdrop-filter: blur() on a semi-transparent element. Give the element a translucent background (a low-opacity white or colour), apply backdrop-filter: blur(10px) so whatever sits behind shows through frosted, add a subtle 1px light border and a soft shadow. It needs a colourful or busy background behind it to read as glass. Every demo here shows the exact values.

What is the backdrop-filter property?

backdrop-filter applies a graphic effect — most commonly blur() — to the area behind an element, rather than to the element itself. It's what makes the frosted-glass look possible in pure CSS. It's well supported in modern browsers; for older ones, provide a more opaque solid background as a fallback so the UI stays readable.

Why isn't my glassmorphism / backdrop-filter blur showing?

Three common causes: the element's background is fully opaque (it needs to be semi-transparent for the blur behind to show), there's nothing behind it to blur (glass needs a colourful or detailed backdrop), or the browser doesn't support backdrop-filter. Always include a solid-background fallback so the design degrades gracefully.

Do these glassmorphism designs need JavaScript?

No — all 12 glassmorphism designs are pure CSS. The frosted effect is entirely backdrop-filter, transparency, borders and shadows. Drop the HTML and CSS in over a suitable background and the glass effect works.

Are these glassmorphism designs accessible and free to use?

Yes. Glassmorphism can hurt text contrast, so each demo keeps text on a sufficiently opaque area and at accessible contrast. All 12 designs are MIT licensed and free for personal and commercial projects.

Related collections

9 CSS 3D Designs

9 hand-coded CSS 3D scenes built with real transforms, perspective, and preserve-3d — iridescent flip cards, a midnight coverflow carousel, kinetic tilt pricing cards, a page-turn flipbook, a Bauhaus drag-cube navigator, a modular synth control panel, a luxury hover-flip product showcase, a 5×5 spinning cube matrix, and a 60-orb DNA double helix. No WebGL, no libraries.

css 3d css 3d effects css 3d animations Responsive

8 CSS Brutalist Designs

8 hand-coded CSS brutalist designs spanning raw e-commerce product cards, a bureaucratic inspection form, a dark constructivist ops dashboard, a collision-typography portfolio grid, an indie SaaS hero + pricing split, a draggable Windows 95 desktop, a three-column long-read editorial, and a stark streetwear catalog. Heavy borders, oversized type, no rounded corners.

brutalist brutalism raw design Responsive

12 CSS Dark Mode UI Patterns

12 free CSS dark-mode UI patterns — OLED true-black, single-accent surfaces, layered slate, and emissive glow effects with copy-paste HTML and CSS.

dark mode dark mode ui oled Responsive