Glassmorphism CSS Generator — Frosted Glass Cards
Create frosted-glass cards with backdrop blur, tint and border, previewed on colourful backgrounds. Free, no sign-up, and your files never leave your device.
Free, with no sign-up and no watermark. The file is processed in your browser and never uploaded.
Create the frosted-glass look with backdrop-filter. Adjust blur, tint, transparency, saturation, border and radius, preview the card on four colourful backgrounds, and copy CSS (with the -webkit- prefix for older Safari) or Tailwind classes.
Step by step
- Set the blur: Drag Blur — 10–20 px suits most cards.
- Tint it: Pick a Tint colour and set Transparency low (10–30%) so the background shows through.
- Refine the edges: Use Border opacity, Corner radius and Soft drop shadow to separate the card from the background.
- Check readability: Switch Background to preview on and the Text colour to make sure text stays legible.
- Copy: Copy from the CSS or Tailwind tab.
Handy for
Hero cards
Overlay headlines on photos or gradients.
Navigation bars
A sticky blurred header lets content glide underneath.
Dashboards
Panels over a soft gradient background.
Login boxes
A clean form floating over imagery.
Good to know
The effect needs something colourful behind the element — on a flat white page it looks plain.
A little extra Saturation (130–180%) makes the background colours glow through.
Always check text contrast over the busiest part of the background.
Questions
Does backdrop-filter work in every browser?
Yes — all current versions of Chrome, Edge, Firefox and Safari support it; the generated CSS includes the -webkit- line for older Safari.
Why isn’t my card blurry?
Backdrop blur only affects what’s behind the element, and the element’s own background must be partly transparent.
Is anything uploaded?
No. The generator runs entirely in your browser; nothing you type or upload is sent anywhere.
More Web Design tools
- CSS Clip-Path Generator — Drag polygon points or pick a shape to build a CSS clip-path for images and sections.
- CSS Flexbox Generator & Playground — Experiment with flex direction, wrapping, alignment and item sizing, then copy the CSS and HTML.
- CSS Grid Layout Generator — Set columns, rows and gaps, place items across cells and copy clean CSS Grid code with HTML.
- Border Radius Generator — Shape corners with simple or eight-value elliptical border-radius to make pills, leaves and organic blobs.
- Neumorphism CSS Generator — Generate soft-UI neumorphic surfaces (flat, concave, convex or pressed) with a built-in contrast check.
- Font Pairing Tool — Try curated heading and body font pairs, including Hindi-ready ones, and copy self-hosted CSS.