Build a frosted glass UI card visually. Tune blur, tint, border and shadow over a live gradient backdrop, then copy ready-to-use CSS.
Frosted, translucent and blurred — a soft glass panel over any backdrop.
🔒 Everything runs locally — no data is uploaded.
A glass panel combines four ingredients: a semi-transparent background so some color from behind shows through, a backdrop-filter: blur() so that background is softened, a thin light border to catch a highlight edge, and a soft shadow to lift the panel off the page. Layer bright, colorful content behind the panel — a gradient, photo or pattern — for the effect to read clearly.
Pick from sample gradient backdrops to see exactly how the blur and tint interact with color underneath.
Independently adjust blur strength, tint color and opacity, border and shadow to match your design system.
Get a ready-to-use CSS block with vendor-prefixed backdrop-filter for Safari support.
Glassmorphism is a UI style that mimics frosted glass using a semi-transparent background, a blurred backdrop and a light border to create depth over colorful content.
The backdrop-filter property with a blur() value blurs whatever is behind the element. Safari needs the -webkit-backdrop-filter prefix as well.
backdrop-filter only blurs content behind the element, so there must be a background image, gradient or other content underneath, and the browser must support the property.
Support is broad in modern browsers, but very old browsers may ignore backdrop-filter and simply show the solid tint color instead.
Yes. It runs entirely in your browser with no account, upload or watermark, and the CSS is yours to use anywhere.