1001Ferramentas
Tools Categories Guides FAQ
About Contact Privacy Policy Terms of Use
🪟 Dev

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.

Glassmorphism

What is glassmorphism?

Glassmorphism is a visual style that imitates frosted glass: a translucent fill, a soft blur of whatever sits behind the panel (backdrop-filter: blur()) and a faint border. macOS Big Sur and Windows 11 are what pushed it into the mainstream.

It works best over colorful backgrounds or photos — on a flat, solid background the effect is close to invisible. Pair it with backdrop-filter: saturate() to punch up the colors showing through.

Browser support: modern browsers only. Safari needs the prefixed -webkit-backdrop-filter as well.

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.

Frequently asked questions

Why does the effect vanish when I apply the CSS over a white background?
Because backdrop-filter blurs whatever sits behind the element, and a flat background has nothing to blur, leaving only the translucent fill. The preview here deliberately uses a four-colour gradient (orange, pink, blue, green) so the glass has something to distort. In your project, place the card over a photo, a gradient or any area with colour variation, otherwise the result looks like a plain semi-transparent box.
What exactly goes into the copied CSS, and what is left out?
You get the rgba background (your base colour at the chosen opacity, 25% by default), backdrop-filter with blur and saturate, the same line repeated with the -webkit- prefix for Safari, border-radius, a 1px white border at 30% opacity if the checkbox is ticked, and a fixed box-shadow of 0 8px 32px in black at 10%. Width, height, padding and positioning are left out, so the element keeps whatever size your layout gives it.
Do the base colour and the background opacity slider do the same thing?
No. The base colour sets the tint of the glass (white by default, which gives the classic milky look; a dark grey gives smoked glass) while opacity sets how much of that tint covers what lies behind. Both feed a single rgba line: the red, green and blue channels come from the colour picker and the last number comes from the opacity slider. At opacity 0 you keep only the blur, the saturation and the rim of the border.

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

CSS Box Shadow Generator

Create CSS box shadows with real-time preview. Configure multiple shadow layers, color, blur, spread and inset. Copy the CSS code.
🟢

CSS Neumorphism Generator

Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.
📐

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.