devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Website-Check

Diese Seite ist noch nicht auf Deutsch verfügbar, daher zeigen wir die englische Version.

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.

Aktualisiert am
Frosted glass
backdrop-filter blurs whatever is behind this card.

CSS



Tailwind classes

    
 Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

    
    
    

      
So nutzt du: 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.
Auch gesucht als: glassmorphism, backdrop-filter, frosted glass, blur background css, glass effect, webkit-backdrop-filter.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich Glassmorphism Generator als Web-App installieren und offline nutzen?
Ja. Glassmorphism Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

      
    

    
    
Ähnliche Tools
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,…