🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
Glassmorphism CSS Generator
Adjust blur, transparency, tint, saturation and border to design a frosted-glass card, preview it on colourful backgrounds and copy the CSS.
Glass card
A frosted panel that blurs whatever is behind it. Adjust the blur, transparency and border to taste.
CSS
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}Glass
Background
When should you use the Glassmorphism Generator?
- Designing glass cards, navbars and modals
- Overlaying readable panels on photos or gradients
- Trying the glass effect before adding it to a design system
How to use the Glassmorphism Generator
- 1
Set the blur
8–20px blur gives the classic frosted look.
- 2
Adjust transparency
10–25% opacity keeps the background visible but text readable.
- 3
Add an edge
A faint light border and soft shadow make the glass stand out.
- 4
Copy
Copy the .glass class, including the -webkit- prefix for Safari.
Examples
Default glass
Settings
Blur 16px · Transparency 0.15 · White tint · Saturation 180%
CSS (excerpt)
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
Common errors and how to fix them
There's no blur- The blur only shows what's behind the element. Put the glass over an image, gradient or colourful content.
It doesn't work in Safari- Safari needs -webkit-backdrop-filter. The generated CSS includes it.
More from Design & Color
Free tools that run in your browser — no signup, nothing uploaded.
Color Picker & Converter
Pick a color and convert between HEX, RGB and HSL instantly.
Color Palette Generator
Generate harmonious color palettes and export them as CSS, Tailwind or JSON.
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
PX to REM Converter
Convert pixels to rem and rem to pixels for any root font size.
CSS Box Shadow Generator
Design layered CSS box shadows visually and copy the CSS or Tailwind class.
CSS Border Radius & Blob Generator
Set rounded corners per side or make organic blob shapes, then copy the CSS.
CSS Clamp() Fluid Size Calculator
Generate clamp() values for fluid typography and spacing between two screen sizes.
CSS Text Shadow Generator
Build CSS text shadows — soft, neon, outline or retro — and copy the code.
JSON Auto-Fixer & Formatter
Repair, validate, and beautify broken JSON (missing quotes, trailing commas).
Glassmorphism Generator FAQ
A UI style where panels look like frosted glass: semi-transparent, with the background blurred behind them and a subtle light border.
All modern browsers — Chrome, Edge, Firefox, and Safari with the -webkit- prefix.
It can be if text has enough contrast. Increase opacity or blur when the background is busy, and check contrast.
saturate() makes the blurred colours behind the glass richer, which gives the effect more depth.
backdrop-filter is GPU-accelerated but can be heavy on large areas or low-end phones. Use it on a few elements, not whole pages.
No. Everything runs in your browser, so your data never leaves your device.