GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Glassmorphism Effects to Copy-Paste

· Godrich · 9 items · 20 min read

FeedbackSCSSCSS onlyHoverLanding page

CSS glassmorphism is the frosted-glass look: content on a panel that blurs whatever sits behind it, the way a shower door blurs the room past it.

Frosted card01 glassmorphism-effects-frosted-card Glass navbar02 glassmorphism-effects-glass-nav Liquid glass button refraction03 glassmorphism-effects-liquid-glass-btn Moving glass blob background04 glassmorphism-effects-glass-blob-bg Glass modal05 glassmorphism-effects-glass-modal Refraction follows cursor06 glassmorphism-effects-refraction-hover Glass tab07 glassmorphism-effects-glass-tab Glass toggle08 glassmorphism-effects-glass-toggle Glass input09 glassmorphism-effects-glass-input

Auto-plays · click a tile to jump to its section · all nine in one zip

These nine aren't ranked by how flashy they look — they follow how much a visitor has to do before the glass reacts. First come two surfaces that already read as glass just sitting on the page, nothing pressed (01, 02), then two set off by resting a pointer or by nothing at all but time passing (03's one-off light sweep, 04's looping blobs), then the two that need an actual click or a moving cursor (05's modal, 06's cursor-tracked shine), and last the three form controls that respond to picking, flipping, or typing into something (07–09). Filling the glass with photographs to page through makes the CSS image reveal gallery its companion, and throwing a party for a finished flow is what the confetti celebration effects follow with.

01Frosted card

Where a css glassmorphism card fits

A feature card sits on a frosted, translucent surface over two soft color blobs, so the blurred color showing through makes the card read like a pane of glass rather than a flat box.

Frosted card
Open in a new tab

01 · Frosted card — Measured area 4.222% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

backdrop-filterscale300ms

Why it is done this way

Resting the pointer on it scales the card up slightly and pushes its shadow deeper.

.fc-card {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: $shadow-press;
  transition: transform $duration $easing, box-shadow $duration $easing;
}
.fc-focal:hover {
  transform: scale(1.03);
  box-shadow: $shadow-raised;
}

02Glass navbar

When to use it

Inside a frosted navigation bar, a blurred glass pill sits behind whichever link the pointer is resting on and slides over to it via translateX.

Glass navbar
Open in a new tab

02 · Glass navbar — Measured area 6.783% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

backdrop-filtertranslateX220ms

Worth noting

Every link keeps the same fixed width, so the pill always lands exactly under the link no matter how long its label runs.

.gn-link { flex: 0 0 auto; width: $w; }
.gn-pill {
  position: absolute;
  width: $w;
  background: rgba(255, 255, 255, .6);
  transform: translateX(0);
  transition: transform $duration $easing;
}
.gn-nav:has(.gn-link:nth-child(3):hover) .gn-pill {
  transform: translateX(calc(#{$w} + #{$sp-2}));
}

03Liquid glass button refraction

What you see

A narrow band of light sits across a glass button's surface, and hovering slides it once from edge to edge via translateX, skewed on an angle so it reads as a refraction glinting through liquid glass rather than a straight wipe.

Liquid glass button refraction
Open in a new tab

03 · Liquid glass button refraction — Measured area 3.422% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

backdrop-filtertranslateX600ms

The key property

.lb-btn::before {
  content: "";
  position: absolute;
  width: 40%; height: 140%;
  background: linear-gradient(100deg, transparent, $color, transparent);
  transform: translateX(-40%) skewX(-18deg);
  transition: transform $duration $easing;
}
.lb-focal:hover::before {
  transform: translateX(340%) skewX(-18deg);
}

04Moving glass blob background

Where it fits

Two softly colored blobs drift behind a glass panel via transform, looping on their own with no hover needed, and the panel's backdrop-filter shows that slow drift as color shifting gently through the glass rather than a sharp shape moving.

Moving glass blob background
Open in a new tab

04 · Moving glass blob background — Measured area 41.944% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

transformblur(40px)2s loop

What to read in the code

.bb-blob {
  border-radius: 50%;
  filter: blur(26px);
  opacity: .88;
}
.bb-blob--a { animation: bb-drift-a $duration $easing infinite; }
@keyframes bb-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(110px, 70px); }
}

05Glass modal

What moves

Pressing the trigger button opens a glass modal panel that grows in from small via opacity and scale, while the page behind it stays visible but blurred.

Glass modal
Open in a new tab

05 · Glass modal — Measured area 14.35% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacityscale600ms

How it is built

A hidden checkbox drives the whole thing — no JavaScript opens or closes it.

.gm-modal {
  opacity: 0;
  transform: scale(.85);
  transition: opacity $duration $easing, transform $duration $easing;
}
.gm-check:checked ~ .gm-modal {
  opacity: 1;
  transform: scale(1);
}

06Refraction follows the cursor

The moment it fires

Moving the pointer across a large glass panel drags an elliptical highlight along with it in real time, like light sliding over the surface of glass.

Refraction follows cursor
Open in a new tab

06 · Refraction follows cursor — Measured area 37.717% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

custom propertyradial-gradientJS 8줄

How it works

A handful of lines of JavaScript write the pointer's position into two custom properties that a radial-gradient reads directly.

panel.addEventListener('pointermove', function (e) {
  var r = panel.getBoundingClientRect();
  var x = ((e.clientX - r.left) / r.width * 100) + '%';
  var y = ((e.clientY - r.top) / r.height * 100) + '%';
  panel.style.setProperty('--mx', x);
  panel.style.setProperty('--my', y);
});

.rh-panel::before {
  background: radial-gradient(120px 80px at var(--mx) var(--my), $color 0%, transparent 70%);
}

07Glass tab

What the user notices

Picking a tab in a glass tab group slides a translucent indicator under it via translateX, driven purely by which radio input is :checked.

Glass tab
Open in a new tab

07 · Glass tab — Measured area 6.422% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

backdrop-filtertranslateX220ms

How to wire it up

Every tab is locked to the same fixed width, so the indicator's travel distance never has to guess at how long a label is.

.gt__tab { flex: 0 0 auto; width: $w; }
.gt__pill {
  position: absolute;
  width: $w;
  transform: translateX(0);
  transition: transform $duration $easing;
}
#gt-2:checked ~ .gt__nav .gt__pill {
  transform: translateX(calc(#{$w} + #{$sp-2}));
}

08Glass toggle

Where this shows up

Flipping a glass switch slides its knob from one side of the track to the other via translateX, and the track's own tint shifts from a faint ink tone to a stronger color to mark the change.

Glass toggle
Open in a new tab

08 · Glass toggle — Measured area 1.328% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

backdrop-filtertranslateX300ms

The core of it

A hidden checkbox's :checked state drives both moves at once.

.sw__knob {
  transform: translateX(0);
  transition: transform $duration $easing, box-shadow $duration $easing;
}
.sw__input:checked ~ .sw__track .sw__knob {
  transform: translateX(22px);
  box-shadow: $shadow-raised;
}
.sw__input:checked ~ .sw__track { background: rgba($color, .55); }

09Glass input

What happens on screen

Focusing a glass input field brightens its border with a soft glow while the label above the text floats up and shrinks into place via translateY and scale, clearing room for whatever gets typed.

Glass input
Open in a new tab

09 · Glass input — Measured area 2.953% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

box-shadowtranslateY220ms

The idea behind it

Nothing here calls .focus() from JavaScript — :focus-within alone drives the whole move.

.gi-field__label {
  transform: translateY(-50%) scale(1);
  transition: transform $duration $easing, color $duration $easing;
}
.gi-field:focus-within .gi-field__label {
  transform: translateY(-14px) scale(.82);
}
.gi-field:focus-within .gi-focal {
  border-color: rgba($color, .9);
  box-shadow: 0 0 0 3px rgba($color, .35), $shadow-raised;
}

Where does glassmorphism break?

What goes wrong

The bug most likely to bite anyone copying these nine — or pasting the output of a css glassmorphism generator — showed up in item 04's drifting blobs, and it wasn't a CSS mistake — the blur was hiding the motion from anyone measuring it, this site's own render check included. The first pass used filter: blur(40px), which looks nicer at a glance since the blobs melt into softer edges, but a strong blur also averages neighboring pixels together, so two consecutive frames of a slow drift end up reading as nearly identical even while the blob keeps moving underneath. That render measured a per-frame pixel difference of 11 to 12 against this site's motion floor of 12 — just under the line that separates "moving" from "static" — so item 04 came back with zero moved frames despite covering close to 42% of the panel in blurred color. Dropping the blur to 26px and widening the blob's own travel distance from 60px to 110px was the entire fix: same shapes, same drift, just enough per-frame pixel change left over for the measurement to catch it. Item 05's modal hit a smaller, more visible version of the same "looks fine, isn't" problem — the trigger button and the modal both sat centered with display: grid; place-items: center inside one shared scene, so once the modal opened, its "Delete this file?" text rendered stacked directly on top of the trigger's own label, a collision no console warning would ever catch, only a screenshot actually opened and looked at.

How to avoid it

When the lightness gap between panel and page disappears the shape melts — in the neumorphism landing kit, which builds form from two shadows alone, that contrast arithmetic is the entire design.

Moving the trigger into its own row and pinning the modal with position: absolute; inset: 0; margin: auto inside the scene kept the two apart for good. One more thing worth knowing before copying any of this: backdrop-filter only blurs real content sitting behind the panel, so a card floating over a single flat color — no blobs, no photo, nothing textured back there — just reads as a plain translucent box no matter how high the blur value goes. That's exactly why every one of these nine keeps a patterned stage, a photo, or a drifting blob layer of its own sitting behind the glass rather than trusting a flat backdrop to carry the effect — a lone backdrop-filter line with nothing worth blurring behind it is the single most common reason a "glassmorphism" card someone built ends up looking like plain frosted plastic instead. Pair the blur with something behind it worth blurring, and the rest of the effect mostly takes care of itself. As for the zip below, it needs a password, and instead of boxing it off, it's sitting mid-sentence like any other word right here: vn8q8tgw — copy exactly that and nothing else.

Variants worth trying

Variant Changed value Feel
Subtler frost Item 01's backdrop-filter: blur(16px) cut to blur(8px) Reads closer to frosted plastic than a lens — still legible, less like glass
Wider refraction Item 03's highlight band widened from width: 40% to width: 70% The sweep reads as a soft wash across the whole button instead of a single glint
Calmer drift Item 04's travel distance pulled back from translate(110px, 70px) to translate(50px, 30px) The blobs still clear this site's motion floor but barely shift the light coming through the panel

Accessibility

What reduced motion leaves

All nine drop their motion under prefers-reduced-motion: reduce, and in every case the underlying state still comes through — nothing here depends on watching a transition to know what's true. Item 01's card, item 07's tab pill, and item 08's toggle knob simply snap straight to their end position instead of easing there; item 05's modal still opens and closes on the same checkbox, just instantly; item 09's label still jumps up into place the moment a field is focused. Two items lose only decoration that was never carrying information: item 03's light sweep is forced to stay parked at its starting position even on a real hover, and item 04's blobs freeze in place entirely, leaving the glass panel in front of them just as readable. Item 06 is the one exception worth flagging — its always-on demo loop turns off, but the real pointermove tracking underneath keeps working exactly as before, since reduced motion was never meant to disable something a visitor is actively steering with their own hand. One thing prefers-reduced-motion doesn't touch at all: backdrop-filter itself is one of the more expensive properties a browser paints, motion or none, so a real page stacking many of these panels at once is worth testing on a slower device regardless of anyone's motion setting.

Related reading

Item 08's knob shares its :checked trigger with the switches covered end to end in 9 CSS Toggle Switches, and the wider family of :checked-driven, JavaScript-free patterns that items 05, 07, and 08 all draw from gets its own write-up in 9 CSS Checkbox Radio Animations. Browser support for backdrop-filter itself is worth checking on MDN before shipping any of this to a page with older-browser traffic.

FAQ

Do I need backdrop-filter for glassmorphism, or is a translucent background enough?

backdrop-filter: blur() is doing the actual work — it's what blurs whatever sits behind the panel. A background: rgba(255,255,255,.14) on its own just makes the panel see-through without blurring anything, which reads as a plain tinted box rather than glass. Item 01 pairs the two together, and that pairing is what every one of these nine effects relies on.

What happens to a liquid glass effect css panel in a browser without backdrop-filter?

The panel falls back to its plain translucent background with no blur at all — still fully readable, just without the frosted look. Item 08's toggle is the one to check first if that fallback worries you: it had to swap a white glass track for an ink-toned one because a light glass surface on this site's white stage nearly vanished even with the blur working, so text and controls should never lean on the blur alone for contrast.

Is the React version in the zip built differently from the plain CSS/HTML one?

Nothing about what moves, or when, changes. Items 05, 07, and 08 swap their hidden checkbox or radio inputs for React useState, since a component tree doesn't have a DOM sibling to read :checked off of the way plain HTML does. Item 06's pointermove listener and the --mx/--my custom properties it writes carry over unchanged — that part never depended on checkboxes or radios in the first place. Designing what happens when a cursor rests on the glass continues in the CSS card hover effects.

Enter the archive password

The password is inside this article. You will find it as you read.