devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

Glassmorphism CSS Generator (backdrop-filter)

Design a frosted-glass card with live sliders and copy cross-browser CSS — with the -webkit-backdrop-filter prefix and a fallback for older browsers.

Atualizado em
Frosted glass
backdrop-filter blurs whatever is behind this card.

CSS



Tailwind classes

    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Glassmorphism Generator
  1. Adjust blur, saturation and background opacity until the card looks right over the sample background.
  2. Switch the preview background to check readability on busy images or dark designs.
  3. Copy the CSS (with prefix and fallback) or the Tailwind arbitrary-value classes.
  4. Remember: the effect only shows when there is something colorful behind the element.


What is glassmorphism?


Glassmorphism is the frosted-glass look popularized by macOS and Windows 11: a semi-transparent panel that blurs whatever is behind it, usually with a thin light border and soft shadow. In CSS it is created with backdrop-filter: blur() plus a translucent background color.


The CSS explained


    

  • background: rgba(255,255,255,.18) — the tint. Too opaque and the blur disappears; too transparent and text becomes hard to read.
    • 

  • backdrop-filter: blur(12px) saturate(160%) — blurs and slightly boosts the colors behind the element, which keeps the glass from looking gray.
    • 

  • -webkit-backdrop-filter — Safari still needs the prefix for reliable support, and it’s the line developers most often forget.
    • 

  • A 1px semi-transparent white border defines the edge of the glass.
    • 



Performance & accessibility


Backdrop blur is GPU-intensive: avoid large blurred areas that animate or sit over video, and test scrolling on low-end phones. Always check text contrast over the most demanding part of the background with the Contrast Checker, and keep the fallback rule so browsers without support get a readable, more opaque background.


In Webflow


Webflow’s Style panel has a Backdrop filters option under Effects — add Blur (and Saturate) there, set the background color with alpha, and Webflow outputs the needed CSS.
Também pesquisado como: glassmorphism, backdrop-filter, frosted glass, blur background css, glass effect, webkit-backdrop-filter.
Ferramentas que combinam com: Glassmorphism Generator
  • Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
  • CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
  • Tailwind Arbitrary Value Generator — Paste CSS and get Tailwind’s bracket syntax right the first time — spaces turned into underscores, type hints added, unsupported properties wrapped as arbitrary properties.
  • HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
Perguntas frequentes
Why doesn’t backdrop-filter work?
The element’s background must be at least partly transparent and there must be visible content behind it. Also check that no parent creates a new stacking context that hides the content, and include the -webkit- prefix for Safari.
Is backdrop-filter supported in all browsers?
All current versions of Chrome, Edge, Firefox and Safari support it (Safari via the prefix in older versions). The generated fallback covers anything else.
What is the difference between filter: blur and backdrop-filter: blur?
filter blurs the element itself, including its text. backdrop-filter blurs only what is behind the element, keeping its content sharp.
How do I add glassmorphism in Webflow?
Select the element, open Style → Effects → Backdrop filters, add Blur, and give the background a color with transparency.
Posso instalar o Glassmorphism Generator como um aplicativo da web e usá-lo offline?
Sim. O Glassmorphism Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localBox Shadow GeneratorStack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the…localCSS Gradient GeneratorDesign a gradient visually — drag color stops, change the angle or type, start from a preset — and copy…localContrast CheckerEnter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA…localTailwind Arbitrary Value GeneratorPaste CSS and get Tailwind’s bracket syntax right the first time — spaces turned into underscores, type…localHEX to RGBA ConverterPaste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( /…localCSS Animation GeneratorDesign CSS animations on a real keyframe timeline. Start from 50+ presets, scrub through every frame,…