Free tool · no signup

Glassmorphism Generator

Design a frosted-glass surface in seconds. Drag the sliders for blur, transparency, saturation, border and corner radius, watch the live preview, then copy ready-to-paste CSS and Tailwind classes.

Glass card

Frosted UI

Live preview of your glassmorphism settings.

Get started

Blur20px

Transparency12%

Saturation160%

Border opacity22%

Corner radius20px

Dark glass tint

/* CSS */
background: rgba(255,255,255, 0.12);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255, 0.22);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,.25);

<!-- Tailwind -->
bg-white/12 backdrop-blur-xl backdrop-saturate-150 border border-white/22 rounded-[20px] shadow-xl

How to create a glassmorphism effect

Glassmorphism comes down to four CSS properties working together: a semi-transparent background, abackdrop-filter: blur()that frosts whatever sits behind the panel, a thin translucent border, and a soft shadow for depth. The generator above writes all of it for you - in raw CSS and as Tailwind utility classes (bg-white/10 backdrop-blur-xl border border-white/20). For the best result, place glass panels over a colourful gradient or photo so the blur has something to frost.

Need full components instead of raw CSS? Browse the free glassmorphism component collection- cards, pricing tables, login forms and more, ready to copy in React & Tailwind.