CSS-Glasmorphismus-Generator

Erstellen Sie trendige Frosted-Glass-UI-Effekte mit Live-Vorschau. Anpassen und CSS-Code kopieren.

10px
25%
180%
30%
16px

Glas-Karte

Dies ist ein mit reinem CSS erstellter Glassmorphismus-Effekt.

CSS-Code

Was ist Glassmorphismus?

Glassmorphismus ist ein UI-Design-Trend mit milchglasartigen Elementen, die den Hintergrund mit einem Unschärfe-Effekt durchscheinen lassen. Er nutzt CSS backdrop-filter: blur(), halbtransparente Hintergründe und subtile Rahmen für ein modernes, geschichtetes Aussehen. Beliebt in Dashboard-UIs, Karten und Modalen.

Browser-Unterstützung

backdrop-filter wird in allen modernen Browsern unterstützt: Chrome, Edge, Safari und Firefox 103+. Für ältere Firefox-Versionen sollten Sie eine solide Fallback-Hintergrundfarbe bereitstellen.

So funktioniert es

  1. Wählen Sie eine Hintergrundfarbe. Glas braucht etwas dahinter, um sichtbar zu sein. Wählen Sie für den Vorschaubereich einen einfarbigen Hintergrund, einen Verlauf oder ein Foto, damit Sie beurteilen können, wie die Unschärfe in Ihrem echten Layout wirkt.
  2. Stellen Sie Unschärfe und Sättigung ein. Der Unschärferadius simuliert die Lichtstreuung von Milchglas; die Sättigung holt die Farben hinter dem Panel nach vorn. Das klassische Rezept im Apple-Stil liegt bei etwa blur(10px) saturate(180%).
  3. Stimmen Sie Glasfarbe und Transparenz ab. Der eigene Hintergrund des Elements muss teilweise transparent sein, eine deckende Farbe blockiert den Hintergrund vollständig. Weiß oder Schwarz bei 10 bis 30 % Alpha ist der typische Ausgangspunkt.
  4. Passen Sie Rahmen und Eckenradius an. Ein haarfeiner weißer Rahmen mit niedrigem Alpha ahmt den Lichtreflex an der Innenkante von echtem Glas nach. Ein Border-Radius von etwa 12 bis 20px ergibt den Soft-Card-Look, den die meisten Glasmorphismus-Designs verwenden.
  5. Kopieren Sie das CSS. Fügen Sie den generierten Eigenschaftsblock in Ihr Stylesheet ein. Fügen Sie die Begleitzeile -webkit-backdrop-filter hinzu, wenn Sie ältere Safari-Versionen unterstützen müssen.

Woher der Begriff kommt

Das Visuelle ist älter als das Etikett. Apple führte mit iOS 7 im Jahr 2013 in Echtzeit unscharfe Hintergründe für Benachrichtigungsfelder und das Kontrollzentrum ein und brachte es im Folgejahr mit macOS Yosemite auf den Desktop, das WebKit-Team lieferte die CSS-Eigenschaft backdrop-filter im August 2015 ausdrücklich, weil sich, wie es im Einführungsbeitrag heißt, „die Designsprache der Benutzeroberfläche für iOS 7 und OS X Yosemite änderte, um schöne Backdrop-Blur-Effekte aufzunehmen“. Microsofts früheres „Aero Glass“ von Windows Vista (2007) war dieselbe Idee, und Microsoft dokumentiert zwei verwandte Materialien im modernen Fluent-System: Acrylic (durchscheinend, unscharf, mit einer Rausch-Überlagerung) und Mica (eine deckende, vom Desktop eingefärbte Variante, eingeführt mit Windows 11). Der einzelne Name „Glasmorphismus“ wurde im November 2020 vom polnischen Designer Michał Malewicz von der Hype4 Academy geprägt, im Gleichschritt mit der Veröffentlichung von macOS Big Sur, die Benennungskonsistenz, in derselben Familie wie das frühere „Neumorphismus“, gab Designern ein gemeinsames Vokabular, um über die Technik zu sprechen.

Das CSS-Rezept

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Drei Dinge, die man sich beim Rezept verinnerlichen sollte. Erstens muss der eigene Hintergrund des Elements transparent oder teilweise transparent sein, MDN sagt es klar: „Das Element oder sein Hintergrund muss transparent oder teilweise transparent sein, damit der Effekt sichtbar ist.“ Eine vollständig deckende background-color verdeckt das unscharfe Abbild, und der Nutzer sieht ein flaches Panel. Zweitens braucht der Effekt etwas dahinter, das unscharf gemacht werden kann, Glasmorphismus funktioniert nicht über einer einheitlich weißen Seite. Drittens akzeptiert das moderne Safari die Eigenschaft ohne Präfix, aber alles, was älter als Safari 17 ist, braucht sowohl backdrop-filter als auch das Zwillingspaar -webkit-backdrop-filter.

Alle zehn Filterfunktionen

backdrop-filter ist im W3C Filter Effects Module Level 2 definiert und akzeptiert dieselben zehn Filterfunktionen wie die normale filter-Eigenschaft: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() und sepia(). Sie lassen sich verketten, und die Reihenfolge ist wichtig, sie werden von links nach rechts auf das Hintergrund-Abbild angewendet. Für Glasmorphismus deckt blur() plus saturate() den kanonischen Look ab; alles andere ist kreative Feinabstimmung (z. B. brightness(105%) auf dunklen Hintergründen, um das unscharfe Abbild aufzuhellen, oder contrast(120%), um die Farbbeziehungen knackig zu halten).

Browser-Unterstützung und das -webkit--Präfix

Stand 2026 wird die Eigenschaft in jedem Evergreen-Browser unterstützt. WebKit lieferte sie als Erster am 10. August 2015 mit Safari 9 / iOS 9, hinter dem Präfix -webkit-backdrop-filter. Chrome ergänzte die Unterstützung ohne Präfix in Version 76 (Juli 2019), Edge folgte mit dem Chromium-Wechsel in Version 79, und Firefox 103 aktivierte sie ohne Flag am 26. Juli 2022. MDN kennzeichnet die Eigenschaft als Baseline 2024 (neu verfügbar seit September 2024), was bedeutet, dass alle vier großen Engines nun zusammenarbeiten. Die Unterstützung in der Praxis liegt bei rund 95 % weltweit. Um ältere Safari-Versionen (und PostCSS-Nutzer) abzudecken, geben Sie die Deklaration mit und ohne Präfix nebeneinander an oder lassen Sie autoprefixer das Präfix anhand Ihrer Browserslist-Konfiguration hinzufügen.

Ein Fallback für Browser, die es nicht unterstützen

Verwenden Sie eine @supports-Abfrage, damit nicht unterstützende Browser einen soliden Fallback statt eines unleserlichen transparenten Panels erhalten:

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

Performance: wann man es verwendet (und wann nicht)

backdrop-filter ist GPU-beschleunigt, aber nicht kostenlos. Jede gefilterte Fläche zwingt den Browser, eine separate Compositing-Ebene zu führen und den Bereich hinter dem Element neu abzutasten. Der Entwurf des W3C-Editors erkennt das direkt an und weist darauf hin, dass verschachtelte oder gestapelte Backdrop-Filter „exponentielle Rendering-Durchläufe“ verursachen können, und der WebKit-Einführungsbeitrag warnt, die Eigenschaft „zwingt die Engine, mehr Rendering-Durchläufe durchzuführen, was sich auf die Performance auswirkt“. Die knappe Zusammenfassung von Web.dev gilt: „backdrop-filter kann der Performance schaden. Testen Sie es vor dem Deployment.“

Praktische Regeln: Halten Sie Unschärferadien im Produktivcode unter ~20px, vermeiden Sie glasartige Flächen über den gesamten Viewport (eine Glas-Navigationsleiste, die bei jedem Scrollen neu gezeichnet wird, ist der klassische Übeltäter), stapeln Sie nicht viele gefilterte Flächen übereinander, und vermeiden Sie backdrop-filter über <video>-Elementen, wo die Unschärfe bei jedem Einzelbild neu berechnet werden muss. Microsoft sagt Acrylic-Nutzern in den Fluent-Dokumenten so ziemlich dasselbe: „Acrylic-Effekte werden automatisch deaktiviert, wenn ein Gerät in den Energiesparmodus wechselt.“

Barrierefreiheit: die Kontrastfalle

Glasmorphismus senkt per Definition den Kontrast zwischen Text und seinem Hintergrund, weil der „Hintergrund“ unter dem Panel jetzt das ist, was sich zufällig dahinter befindet, und das variiert, während der Nutzer scrollt oder das Hintergrundbild wechselt. Die relevanten WCAG-2.1-Mindestwerte (4,5:1 für normalen Fließtext, 3:1 für großen oder fetten Text) müssen gegenüber dem schlimmstmöglichen Hintergrund erfüllt werden, nicht dem Durchschnitt. Praktischer Rat: Halten Sie Fließtext aus Glas-Panels heraus und verwenden Sie sie hauptsächlich für Chrome (Karten, Kopfzeilen, Modals), wo das eigentliche Lesen gegenüber einer deckenderen inneren Fläche stattfindet. Stellen Sie immer eine deckende Fallback-Variante für Nutzer bereit, die Transparenz auf Betriebssystemebene ausgeschaltet haben, sowohl macOS (Systemeinstellungen → Bedienungshilfen → Anzeige → Transparenz reduzieren) als auch Windows (Einstellungen → Personalisierung → Farben → Transparenzeffekte) bieten den Schalter, und CSS kann ihn erkennen:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Wo Glasmorphismus gut funktioniert und wo nicht

Häufige Fehler

  1. Den transparenten Hintergrund vergessen. backdrop-filter auf einem Element mit deckender background-color zu setzen erzeugt keinen sichtbaren Effekt, die deckende Farbe verdeckt das unscharfe Abbild. Kombinieren Sie es immer mit einem rgba()-/hsla()-Hintergrund.
  2. Glas über einer einfarbigen Fläche. Wenn sich hinter dem Panel nichts Interessantes befindet, erzeugt das Weichzeichnen kein „Glas“, nur ein schwach eingefärbtes Rechteck. Der Effekt braucht ein Foto, einen Verlauf oder einen belebten Hintergrund, um zu wirken.
  3. Das -webkit--Präfix überspringen. Ältere Safari-Versionen brauchen es. Liefern Sie entweder beide Zeilen aus oder verlassen Sie sich auf autoprefixer.
  4. Zu viele Panels stapeln. Jede gefilterte Fläche ist ihre eigene GPU-Ebene. Drei oder vier ist meist die praktische Grenze, bevor die Bildrate auf Mobilgeräten einbricht.
  5. Die Worst-Case-Kontrastprüfung nicht bestehen. Testen Sie das Panel gegen die hellsten und dunkelsten Stellen jedes Hintergrunds, über dem es liegen wird, nicht nur gegen einen einzigen Demo-Screenshot.
  6. Den Unschärferadius animieren. Beim Hover von backdrop-filter: blur(0) → blur(20px) überzugehen ist technisch erlaubt, berechnet die Unschärfe aber bei jedem Einzelbild neu und ist der einfachste Weg, die Scroll-Performance zu ruinieren. Animieren Sie stattdessen opacity oder transform und lassen Sie die Unschärfe statisch.

Häufig gestellte Fragen

Warum sieht meine Glaskarte wie ein flaches Panel aus?

Die eigene background-color des Elements ist vollständig deckend. backdrop-filter zeichnet weich, was hinter dem Element liegt, aber das Element zeichnet darüber. Bei einem deckenden Hintergrund verdeckt diese Zeichnung das unscharfe Abbild. Wechseln Sie zu rgba() oder hsla() bei 10 bis 30 % Alpha, dem Idealbereich für die meisten Glasmorphismus-Designs.

Funktioniert es in Safari?

Ja, Safari war der erste Browser, der die Eigenschaft auslieferte, im August 2015. Ältere Safari-Versionen brauchen das Präfix -webkit-backdrop-filter; das moderne Safari akzeptiert die Form ohne Präfix. Beides anzugeben hält dasselbe CSS auf jeder noch aktiv genutzten Safari-Version funktionsfähig.

Ist Glasmorphismus barrierefrei?

Nur, wenn Sie für den schlimmstmöglichen Hintergrund gestalten. WCAG 2.1 verlangt ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für große oder fette UI-Komponenten, gemessen gegen die Farbe, die letztlich unter dem Panel landet. Stellen Sie unter der Media-Query prefers-reduced-transparency einen deckenden Fallback bereit, damit Nutzer, die Transparenz auf Betriebssystemebene ausgeschaltet haben, eine lesbare Fläche erhalten.

Schadet es der Performance?

Es kann. Jede gefilterte Fläche zwingt den Browser, eine separate Compositing-Ebene zu führen und den Bereich dahinter neu abzutasten, und große Unschärferadien oder gestapelte Panels erhöhen die Kosten. Halten Sie den Radius unter etwa 20px, vermeiden Sie Panels über den gesamten Viewport und setzen Sie es nicht über <video>. Der offizielle Rat von Web.dev ist, vor dem Ausliefern auf einem repräsentativen Low-End-Gerät zu testen.

Was ist der Unterschied zwischen Glasmorphismus und Neumorphismus?

Neumorphismus (einige Monate früher geprägt) erzeugt die Illusion weicher, geprägter Kunststoffformen, indem er innere und äußere Schatten auf derselben einfarbigen Fläche wie der Seitenhintergrund kombiniert, keine Transparenz, keine Unschärfe. Glasmorphismus lässt den Seitenhintergrund durch ein durchscheinendes, unscharfes Panel sichtbar. Sie sind eher ergänzende als konkurrierende Stile, und manche Designs verwenden beide: zum Beispiel eine neumorphe Schaltfläche auf einer Glaskarte.

Kann ich das CSS für den Produktiveinsatz kopieren?

Ja. Die Ausgabe ist reines CSS mit Standardeigenschaften, keine proprietären Erweiterungen, kein JavaScript. Fügen Sie die Regel in Ihr Stylesheet ein und wenden Sie die Klasse auf das Element an, das wie Glas aussehen soll.

Verwandte Tools

CSS-Verlaufs-Generator

Schöne CSS-Verläufe visuell erstellen.

CSS-Box-Shadow-Generator

Visueller Box-Shadow-Builder mit Live-Vorschau.

Border-Radius-Generator

CSS-border-radius visuell entwerfen.