CSS Glassmorphism Generator
Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.
O que é Glassmorphism?
Glassmorphism é um estilo visual que simula vidro fosco: fundo translúcido, leve desfoque do conteúdo atrás (backdrop-filter: blur()) e uma borda sutil. Foi popularizado pelo macOS Big Sur e Windows 11.
Funciona melhor sobre fundos coloridos ou imagens — em fundos sólidos, o efeito é quase invisível. Combine com backdrop-filter: saturate() para realçar as cores que aparecem por trás.
Compatibilidade: requer browsers modernos. Para Safari, inclua -webkit-backdrop-filter.
Create the frosted-glass effect (glassmorphism)
Glassmorphism, that translucent frosted-glass look Apple and Microsoft helped make popular, lends cards and panels a modern feel. Recreating it in CSS means pulling together transparency, background blur and subtle borders, and that's exactly the part this generator handles visually.
Move the blur (the backdrop-filter), the saturation, the opacity and the borders around, and the effect shifts in real time over a sample background. Once it looks the way you pictured it, one click copies the finished CSS, with the right properties to work across browsers.
It runs in the browser, nothing to install. It ends up being a quick route into one of the most distinctive interface trends of recent years, no memorising the backdrop-filter syntax required.
Related Tools
CSS Gradient Generator
Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.
Mesh Gradient Generator
Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.
CSS Button Generator
Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.