AI CSS Animations

CSS Glassmorphism & Liquid Glass Effects

30 glassmorphism and liquid glass effects in CSS: frosted cards, glass buttons, navbars, controls, login forms and refraction. Each one comes with a moving backdrop so the glass has something to blur.

Glassmorphism Card

The classic glassmorphism card: a frosted pane over two gradient orbs that slowly circle behind it, so you watch the blur at work. Semi-transparent fill, backdrop-filter, rim light.

frosted · card · animated · tailwind

Liquid Glass Button

An Apple style liquid glass pill: the dots behind it swell in the middle and squeeze at the rim, and it springs up on hover. The refraction is an SVG displacement map, with a frosted fallback.

liquid · button · animated

Liquid Glass Card

A slab of liquid glass gliding over a striped sunset: the middle stays clear while the rim bends every line, like thick glass. SVG displacement for the refraction, frosted fallback elsewhere.

liquid · card · animated

Glass Navbar

A frosted pill navbar floating over a hero with drifting color. A glass highlight slides to whichever link you hover, driven by :has(), and settles back on the current page.

frosted · navigation · animated

Glassmorphism Login Form

A frosted sign in card with glass inputs and a solid button, floating between two slow orbs. Fields glow on focus with :focus-within, and the button gets a shine sweep on hover.

frosted · form · card · animated

Liquid Glass Switch

An iOS 26 style switch on a frosted settings row. Hover or press and the white thumb swells into a clear glass lens that bends the track under it. A real checkbox, so it works with keys and forms.

liquid · controls · animated

Liquid Glass Tab Bar

A floating iOS 26 tab bar over a scrolling feed. The selected tab wears a glass droplet that magnifies the icon under it and springs to the tab you pick. Radio inputs and :has(), no script.

liquid · navigation · animated

Frosted Glass Panel

Heavy frosted glass with a fine grain, like sandblasted glass, over a slowly turning aurora. The grain is an inline SVG turbulence filter blended in with overlay, so text stays crisp.

frosted · card · animated

Liquid Glass Magnifier Lens

A drop of liquid glass drifts over small print and a dot grid, magnifying the middle and squeezing the rim like a real lens. Chromium only for the bend; other browsers show a clear glass bead.

liquid · animated

macOS Glass Dock

A frosted macOS style dock over a drifting wallpaper. Icons magnify under the cursor, neighbors grow a little with :has(), a label pops up, and one app bounces like it is launching.

frosted · navigation · animated

Dark Glassmorphism Card

Smoked black glass over drifting neon glows, set up as a revenue tile. The sparkline draws itself, holds, then fades and redraws. A dark tint plus backdrop-filter keeps the glow soft.

dark · frosted · card · animated

Glass Toast Notification

An iOS style frosted notification drops onto a lock screen with a little bounce, waits, then slides away on a loop. Hover pauses it. Opacity and backdrop-filter share one element so it fades cleanly.

frosted · card · animated

Glass Credit Card

A frosted payment card with a gold chip that floats with a slow 3D tilt while a holographic sheen slides across. Standard card ratio, masked number, all built from gradients and one pseudo-element.

frosted · card · animated

Glass Music Player

A frosted now playing card: album art, a progress bar that fills as the song plays, bouncing equalizer bars and glass controls that light up on hover. Progress is a scaleX transform.

frosted · controls · animated

Glass Weather Widget

An iOS style weather widget in frosted glass over a live sky: the sun turns behind it and clouds drift across, blurred by the pane. Current conditions on top, a five hour forecast below.

frosted · card · animated

Glass Profile Card

A frosted user card with an avatar, a pinging online dot, stats and follow buttons. On hover the card lifts and both orbs slide in underneath, so the frost thickens with color.

frosted · card · animated · tailwind

Glass Pricing Card

A frosted pricing card for a popular plan: price and call to action on the left, checked features on the right. A band of light sweeps across the glass every few seconds and the card lifts on hover.

frosted · card · animated

Glass Modal Dialog

A confirm dialog in frosted glass that pops over a blurred, dimmed app, holds, then closes, on a loop you can pause by hovering. The overlay fades its opacity, never its blur radius, to stay cheap.

frosted · card · animated

Glass Search Bar

A frosted pill search field that widens on hover or focus, hides its shortcut hint and drops a glass list of suggestions with a stagger. Real input, :focus-within, no script.

frosted · form · animated

Glass Sidebar

A frosted icon rail that slides open into a full sidebar on hover, blurring the dashboard it covers. Labels fade in after the width settles, and the active item keeps an accent marker.

frosted · navigation · animated

Glass Dropdown Menu

A frosted dropdown built on details and summary, so it opens and closes with no script. The chevron flips, the panel drops in with its items staggered, and the danger row sits under a divider.

frosted · navigation · animated

Liquid Glass Slider

An iOS 26 style volume slider whose white thumb turns into a glass lens on hover and bends the track beneath it. Six radio stops and :has() move the thumb, fill and readout, so arrow keys work too.

liquid · controls · animated

Glass Calculator

A frosted calculator with a recessed display and glass keys, over two slow orbs you can watch through the keypad. Keys brighten on hover and squash on press. Real buttons laid out with CSS grid.

frosted · controls · animated

Glass Header on Scroll

A sticky site header that starts clear and frosts over once the page scrolls under it, blurring the hero as it passes. The demo loops the scroll; on a real site, a scroll timeline drives the fade.

frosted · navigation · animated

Glass Clock Widget

An iOS style world clock widget: four analog dials, two for day and two for night, on a frosted card over drifting color. Second hands sweep in sync and the other hands turn at true speed.

frosted · card · animated

Glass Chat Bubbles

A short chat plays out over a drifting wallpaper: frosted incoming bubbles, tinted outgoing ones, a typing indicator and a glass compose bar. Each bubble pops from its tail with a small overshoot.

frosted · animated

Glass Progress Ring

A frosted storage card whose ring fills to 72 percent while the number counts up, holds, then drains and starts over. One registered @property drives the conic gradient, the glowing cap and counter.

frosted · card · animated

Glass Filter Chips

Frosted topic chips on a glass panel: pick one and it tints with the accent while a check draws in, and a CSS counter keeps the selected total. Real checkboxes and :has() for the state, no script.

frosted · controls · form · animated

Glass Stacked Cards

Three frosted cards stacked like a deck, each layer thickening the blur behind the next. Hover and they fan out with a staggered spring so every card shows. Transforms only, so it stays smooth.

frosted · card · animated · tailwind

Glass Table

A frosted orders table with avatars, status pills and tabular amounts over drifting color. Rows light up on hover, and the newest order glows on a loop beside a live dot. A real table element.

frosted · card · animated

How to use these glass effects

Open any effect and copy the HTML and CSS. Each snippet includes a small colorful backdrop, because glass over a flat color looks flat. In your app, delete the backdrop and put the glass element over your own photo, gradient or animated background.

The glass itself is a semi-transparent fill, backdrop-filter: blur() saturate(), a thin light border and a soft shadow. Set --gls-color to tint it and --gls-size to scale it. The liquid glass entries add an inline SVG displacement filter for refraction, which renders in Chromium; other browsers fall back to frosted glass.

Keep text on glass readable: check the contrast over the busiest part of your background. Every snippet ships with a prefers-reduced-motion rule that stops the backdrop and highlight motion.

Frequently asked questions

How do I make a glassmorphism effect in CSS?

Give an element a semi-transparent background, backdrop-filter: blur(), a thin light border and a soft shadow, and put something colorful behind it. Every entry above is that recipe tuned for a different component.

How do I make Apple's Liquid Glass effect with CSS?

Combine backdrop-filter blur and saturation with an inline SVG feDisplacementMap filter for the refraction, plus a bright edge highlight. The refraction renders in Chromium today; other browsers get frosted glass.

Why is backdrop-filter not working?

The element's own background must be transparent or semi-transparent, older Safari needs -webkit-backdrop-filter, and there has to be visible content behind the element to blur.

Does glassmorphism hurt performance?

backdrop-filter is GPU work on every frame behind it. Keep glass panels modest in size, avoid animating the blur radius, and test on low-end phones.

Is glassmorphism accessible?

Only with enough text contrast. Add a more opaque fallback, and consider @media (prefers-reduced-transparency: reduce) to swap the glass for a solid panel.