What is glassmorphism?

A design trend popularised by macOS Big Sur and Windows 11 where UI surfaces look like frosted glass: a semi-transparent background, the content behind them blurred, a subtle border to catch the light, and a soft shadow for depth. Different from neumorphism (which fakes 3D with two opposing shadows) and from skeuomorphism (which mimics real-world materials in detail).

Why does it look like nothing in my project?

Glassmorphism needs something behind it to blur. On a plain white page, a 95% white background with backdrop-blur looks identical to a 95% white background without backdrop-blur - there's nothing to blur. Drop a colourful image, gradient or busy pattern behind the card; the effect appears instantly.

How is this different from a regular semi-transparent background?

`background: rgba(255,255,255,0.5)` lets the backdrop show through unchanged - readable if the backdrop is plain, illegible if the backdrop is busy. `backdrop-filter: blur(20px)` plus a translucent background blurs the backdrop *before* it shows through, so the text on top stays legible no matter how chaotic the image behind. The blur is what makes glassmorphism work; the transparency alone doesn't.

Is backdrop-filter supported everywhere?

Modern Chrome, Edge, Safari (with `-webkit-` prefix for older versions) and Firefox 103+. Older Firefox falls back to no blur - the background still shows through, just sharply, which usually works as a degraded experience. For critical UI, add a more opaque background fallback (`background: rgba(255,255,255,0.9)`) so the design holds without the blur.

Why is it bad for performance?

`backdrop-filter: blur()` forces the browser to allocate an offscreen buffer matching the element's size, blur the pixels behind it, then composite. On scroll, this happens every frame for every glass element in view. One or two glass cards per page is fine; a list of 20 glassy items at once will drop frame rate noticeably on lower-end laptops. Profile before shipping a glass-heavy interface.

Gerador de glassmorphism

Vidro fosco em CSS com pré-visualização ao vivo - ajuste cor de fundo, backdrop blur, borda e sombra sobre um fundo carregado.

Roda no seu navegador

Glassmorphism = fundo translúcido + backdrop blur forte + borda fina + sombra suave. A pré-visualização coloca seu card sobre um fundo carregado para o blur ficar visível (o efeito some sobre fundo liso - precisa de algo atrás). Os quatro ingredientes têm sliders; a pré-visualização atualiza ao vivo e o bloco CSS está pronto para colar.

Fundo

Cor de fundo

Opacidade fundo20%

Cor da borda

Opacidade borda35%

Backdrop blur16px

Border radius16px

Desfoque da sombra32px

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);

Pré-visualização

Vidro fosco

Painéis translúcidos com backdrop blur forte e borda sutil.

Como usar

Pick a backdrop
Switch between an image, a gradient and a busy pattern in the preview - the glass effect changes meaning with each.
Tune transparency + blur
Background alpha controls how much the backdrop shows through; backdrop blur controls how much it's softened. Both work together.
Add the border + shadow
A 1 px white-ish translucent border gives the glass a physical edge. A soft shadow lifts it off the surface.
Copy the CSS
All four declarations (background, backdrop-filter, border, box-shadow) come in one block, ready to paste.

O que é?

Glassmorphism is the frosted-glass UI aesthetic - translucent panels backed by a strong backdrop blur. The CSS recipe is small: a `background-color` with alpha < 1, `backdrop-filter: blur(...)`, a thin border (often `rgba(255,255,255,0.18)`), generous `border-radius`, and an optional soft `box-shadow` for depth. The illusion only works when there's something colourful behind the panel for the blur to act on - on flat backgrounds the effect collapses to a simple translucent rectangle.

Quando usar

Floating UI surfaces over hero images or videos, nav bars sitting on top of photo backgrounds, modal panels over a blurred backdrop of the page below, cards in marketing pages where the background is a vibrant gradient or photo, and tooltip-like overlays where you want to suggest content layered above the page rather than replacing it.

Erros comuns

Designing the glass card against a flat background in Figma, then being surprised when it looks like nothing in production - test on the actual colourful backdrop. Stacking glass-on-glass (the blur quality degrades and frame rate tanks). Forgetting the border - without it, glass looks like a smudge; the thin highlight is what reads as 'edge of physical glass'. Skipping the box-shadow - depth is what separates glass from cellophane.

FAQ

What is glassmorphism?: A design trend popularised by macOS Big Sur and Windows 11 where UI surfaces look like frosted glass: a semi-transparent background, the content behind them blurred, a subtle border to catch the light, and a soft shadow for depth. Different from neumorphism (which fakes 3D with two opposing shadows) and from skeuomorphism (which mimics real-world materials in detail).
Why does it look like nothing in my project?: Glassmorphism needs something behind it to blur. On a plain white page, a 95% white background with backdrop-blur looks identical to a 95% white background without backdrop-blur - there's nothing to blur. Drop a colourful image, gradient or busy pattern behind the card; the effect appears instantly.
How is this different from a regular semi-transparent background?: `background: rgba(255,255,255,0.5)` lets the backdrop show through unchanged - readable if the backdrop is plain, illegible if the backdrop is busy. `backdrop-filter: blur(20px)` plus a translucent background blurs the backdrop *before* it shows through, so the text on top stays legible no matter how chaotic the image behind. The blur is what makes glassmorphism work; the transparency alone doesn't.
Is backdrop-filter supported everywhere?: Modern Chrome, Edge, Safari (with `-webkit-` prefix for older versions) and Firefox 103+. Older Firefox falls back to no blur - the background still shows through, just sharply, which usually works as a degraded experience. For critical UI, add a more opaque background fallback (`background: rgba(255,255,255,0.9)`) so the design holds without the blur.
Why is it bad for performance?: `backdrop-filter: blur()` forces the browser to allocate an offscreen buffer matching the element's size, blur the pixels behind it, then composite. On scroll, this happens every frame for every glass element in view. One or two glass cards per page is fine; a list of 20 glassy items at once will drop frame rate noticeably on lower-end laptops. Profile before shipping a glass-heavy interface.