devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoría web

Esta página aún no está traducida al español, así que la mostramos en 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.

Actualizado el
Frosted glass
backdrop-filter blurs whatever is behind this card.

CSS



Tailwind classes

    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo 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.
También se busca como: glassmorphism, backdrop-filter, frosted glass, blur background css, glass effect, webkit-backdrop-filter.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar Glassmorphism Generator como aplicación web y utilizarla sin conexión?
Sí. Glassmorphism Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas 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,…