Glassmorphism Generator
Design frosted-glass UI elements with live preview. Tweak blur, opacity, saturation and more — copy CSS or Tailwind in one click.
Presets
Preview
Controls
Glass Background
Backdrop
Border
Shape & Shadow
Effects
Inner Glow
Subtle highlight from top-left
Noise Texture
Grain overlay for depth
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}How it works
Pick a preset
Start from iOS Light, Frosted, Crystal or any other preset.
Customise
Adjust blur, opacity, saturation, border, radius and shadow with live preview.
Copy the code
Grab the CSS or Tailwind output and drop it straight into your project.
Where the effect works well
Dashboard cards and stats panels
Dashboard cards and stats panels are a natural fit. A frosted-glass card over a gradient background creates a sense of depth without heavy shadows, and the blur keeps the background visible without distracting from the numbers inside.
Login forms over hero images
Login and signup forms over a blurred hero image are another popular pattern. The glass card draws the eye to the form while keeping the background image in view, which makes the page feel richer than a plain white form on a plain background.
Pricing tables and modals
Pricing tables and modals benefit from it too. Glass cards read as visually separate from the page without needing hard borders or shadows. A low opacity — around 20–35% — with a saturation boost gives the cleanest result on colorful backgrounds.
Frequently asked questions
What is glassmorphism?
Glassmorphism is a UI design style that mimics frosted glass using a semi-transparent background, backdrop blur, and a subtle border. It was popularised by Apple's iOS 13 and Windows 11 UI.
Does glassmorphism work in all browsers?
backdrop-filter is supported in all modern browsers including Chrome, Safari, Firefox, and Edge. Always include the -webkit-backdrop-filter prefix for full Safari compatibility.
How do I use the generated CSS?
Copy the CSS output and apply the .glass class to any HTML element. Make sure the element sits on top of a colourful background or image — glassmorphism only looks good over a rich background.
Can I use the Tailwind output directly?
Yes. Copy the Tailwind class string and paste it into your className or class attribute. Requires Tailwind CSS v3 or later. Arbitrary value classes like backdrop-saturate-[180%] require JIT mode, which is the default in Tailwind v3+.
Does backdrop-filter affect performance?
backdrop-filter is GPU-accelerated but can be expensive on low-end devices, particularly at high blur values or when applied to elements that animate. For static cards it has negligible impact on most modern hardware, but it is worth testing on the target devices if the element is frequently redrawn.
Why does the glass effect disappear when I remove the background?
Glassmorphism relies on having visible content behind the element for the blur to work on. Without a background image or gradient underneath, backdrop-filter has nothing to blur and the card looks plain. Always layer the glass element on top of a rich or colorful background.
Can I use glassmorphism with dark mode?
Yes, and it often looks better in dark mode. For dark backgrounds, try a slightly lighter semi-transparent fill — around rgba(255,255,255,0.07) to rgba(255,255,255,0.12) — with a subtle white border at low opacity. The tool provides both light and dark background previews so you can check both before copying the code.