Glassmorphism

Contexto Histórico

Popularizado por Apple iOS, Microsoft Windows 11 e Figma (2020). Usa backdrop-filter CSS para efeito frosted glass realqueda.

Quando Usar

Glass works when there's something worth seeing through it. A vibrant gradient, a photo, dynamic content shifting underneath — that's when the translucency earns its keep. Slapping backdrop-filter on a card over a white background? That's just a slightly transparent box. You've added GPU cost for nothing. And it does cost. Backdrop-filter triggers compositing layers and can tank scroll performance on lower-end devices, especially with large blur radii. Use it on focused, contained elements — modals, floating toolbars, notification panels. Not on every card in a grid of forty.

Princípios de Design

• Contrast is non-negotiable. Text over glass must hit WCAG AA minimums regardless of what's behind it. Add a semi-opaque tint layer or text shadow — don't rely on the background staying dark enough.
• Always provide a solid fallback. If backdrop-filter isn't supported or the OS has reduced transparency enabled, your UI should still look intentional, not broken.
• Keep blur radii between 10-20px. Below 10 looks like a rendering bug. Above 20 and you've lost the "seeing through" quality that makes glass feel like glass — it's just a colored overlay at that point.
• Use glass to communicate hierarchy, not to look fancy. A floating panel over content? Glass tells the user it's temporary, layered, dismissible. A primary content area? Use a solid surface.
• Mind the borders. A 1px border at rgba(255,255,255,0.15-0.25) sells the illusion of a physical edge catching light. Without it, glass elements bleed into their surroundings and lose definition.

Especificações Técnicas

Relacionados

Flat & Soft UI

Neumorphism

Futurista & Tech

Spatial UI (VisionOS)

Flat & Soft UI

Skeuomorphism

Minimalismo & Swiss

Minimalism & Swiss Style

Brutalismo

Brutalism