Diese Seite nutzt datenschutzfreundliche Analyse-Daten aus erster Hand, um zu sehen, welche Seiten und Tools nützlich sind. Keine Daten werden an Werbetreibende oder Tracking-Dienste Dritter weitergegeben. Details zum Datenschutz

Tools · CSS · Glassmorphism-Effekt erstellen

Glassmorphism-Effekt erstellen

Erstelle eine Milchglas-Karte mit Hintergrundunschärfe, Transparenz und weichem Rand, und kopiere das CSS.

Dein Ergebnis erscheint hier

Füge eine Datei hinzu und starte das Tool.

Einstellungen

Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.

Datei hier ablegen oder auswählen.

Läuft komplett im Browser. Es wird nichts hochgeladen.

Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.

So funktioniert es

  1. Unschärfe, Farbton, Hintergrund-Deckkraft und Sättigung anpassen.

  2. Rand-Deckkraft und Eckenradius für mehr Tiefe feinabstimmen.

  3. Das fertige CSS kopieren, einschließlich der backdrop-filter-Eigenschaft.

Häufige Fragen

Der Effekt basiert auf backdrop-filter, das manche älteren Browser nicht unterstützen. Fehlt es, zeigt die Vorschau den Farbton ohne Unschärfe, aber das kopierte CSS ist davon nicht betroffen und bleibt korrekt.

Beides. backdrop-filter weichzeichnet alles, was hinter dem Element liegt: ein Bild, einen Verlauf, oder eine andere Farbe.

Das generierte CSS enthält das Präfix -webkit-backdrop-filter zusätzlich zur Standard-Eigenschaft.

Nein. Alles läuft in deinem Browser.

Anleitungen

Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.

4 Min. Lesezeit

Why Glassmorphism Falls Apart Without Something Behind It

A frosted-glass panel with nothing behind it to blur isn't glass, it's just a translucent grey box. The whole effect depends on real content sitting behind the element - which is also why it's so easy to get wrong.

Anleitung lesen 4 Min. Lesezeit

How to Build Frosted-Glass CSS (Glassmorphism)

Pick a demo backdrop, tune blur, tint, saturation and border, and copy a real, standards-compliant CSS block. What each control changes and why the demo preview is honestly an approximation.

Anleitung lesen 4 Min. Lesezeit

Building a Frosted-Glass Navbar That Doesn't Disappear on Old Browsers

A sticky glass navbar over scrolling content is one of the most common real uses of backdrop-filter, and one of the easiest to get wrong on legibility and older-browser fallback both.

Anleitung lesen

Ähnliche Tools

CSS-Schatten erstellen

Erstelle einen mehrschichtigen CSS-Schatten (box-shadow) mit Live-Vorschau, und kopiere den Code.

 CSS-Verlauf erstellen

Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.

 CSS-Ecken abrunden

Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.

 Farbkontrast prüfen

Prüfe, ob zwei Farben die WCAG-Kontrastanforderungen für Text und Bedienoberfläche erfüllen.

 Farbkonverter

Wandle eine Farbe live zwischen HEX, RGB, HSL und OKLCH um.

 CSS-Minifizierer & -Formatierer

Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.

Kommentare

  1. Noch keine Kommentare. Teile deine Erfahrung als Erstes.
Deine Bewertung (optional)

Keine Bewertung ausgewählt