Glassmorphism Generator

Glassmorphism is the frosted-glass look popularised by macOS Big Sur, iOS panels and Windows Acrylic: a semi-transparent surface that blurs whatever sits behind it, finished with a thin light border and a soft shadow. In CSS the heavy lifting is done by backdrop-filter — unlike a normal filter, it blurs the content rendered behind the element, which is why the glass only comes alive over a colourful backdrop.

This generator gives you every ingredient as a live slider: backdrop blur, transparency, colour saturation boost, corner radius, border strength and shadow depth, plus a tint colour, an optional fractal-noise texture for a realistic frost, and an inner glow that lights the top edge like real glass. Seven presets — from airy Aurora to smoky Obsidian — give you a starting point, and a dark/light text toggle previews readability. Because glass is invisible over a flat colour, you can switch the backdrop between a vibrant gradient, a photo, mesh blobs, a dark grid, or upload a screenshot of your own UI; the image is read locally and never leaves your browser.

When it looks right, copy the result as a plain CSS class — with the -webkit-backdrop-filter prefix Safari needs already included — or as Tailwind arbitrary-value classes you can paste straight into your markup.