Glassmorphism Generator
Frosted-glass cards with backdrop-blur
.glass {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(16px) saturate(180%) brightness(100%);
-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(100%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: #ffffff;
}
}bg-[rgb(255_255_255_/_0.65)] backdrop-blur-[16px] backdrop-saturate-[180%] backdrop-brightness-[100%] border-[1px] border-[rgb(255_255_255_/_0.3)] rounded-[16px] shadow-[0_8px_24px_rgb(0_0_0_/_0.15),_inset_0_1px_0_0_rgb(255_255_255_/_0.4)]The Tailwind form has no equivalent of the @supports fallback above — add an opaque background for browsers without backdrop-filter if you need one.
Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
How far the backdrop is smeared behind the card. This is the whole effect — at 0 the glass is only a tinted rectangle.
Pushes colour back into the blurred backdrop. Blurring averages colours toward grey, so convincing frosted glass usually sits above 100%.
Lightens or darkens whatever shows through. Drop it when the glass sits on a pale background and the text on top starts losing contrast.
How much of the glass colour sits over the blur. Past about 0.3 it stops reading as glass and starts reading as a solid panel.
A hairline edge is what separates the panel from the page. 1px is usually enough; thicker starts to look like a frame rather than an edge.
How visible that edge is. Real glass catches light unevenly, so a semi-transparent white border reads better than a solid one.
How far the shadow drops below the card. This is what sets the apparent height of the panel above the page.
Softness of the shadow edge. Keep it larger than the Y offset — a shadow tighter than its drop reads as a hard outline.
Strength of the shadow. Glass sits close to the surface, so this wants to stay low — heavy shadows make it look like plastic.
Adds a bright inset line along the top edge, the way light catches the lip of a real pane. It is the cheapest thing here and does the most.
Rounding on the panel itself. Larger radii read as softer and more physical; 0 gives you a sheet of glass cut square.
Keep this glass style. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Filter & BlendEvery filter function, backdrop-filter, and all sixteen blend modes on a subject drawn in CSS. Order is preserved because blur-then-brighten is a different picture from brighten-then-blur, and nothing is loaded from anywhere.
- Meta & OG BuilderThe tags that get you indexed and the card your link turns into, with length counters and a search-result preview. Emits Next.js Metadata, not stray meta tags.
- Mesh GradientThe soft multi-colour wash every hero uses, as stacked CSS radial gradients rather than a 400KB PNG. Drag the blobs on the canvas; fades avoid the grey halo that `transparent` gives every one of them.