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.
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+.