Glassmorphism-Generator
Erstelle CSS-Milchglas-Effekte mit Echtzeit-Vorschau.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
Empfohlene Tools
Handverlesene Dienstprogramme, die Sie nützlich finden könnten
Den Milchglas-Effekt (Glassmorphism) in CSS erzeugen
Überblick
Glassmorphism ist der Milchglas-Look — ein durchscheinendes, unscharfes Panel, das den Hintergrund sanft durchscheinen lässt, populär gemacht von modernen Betriebssystemen. In CSS nachzubilden heißt, Hintergrundtransparenz, einen Hintergrund-Blur, einen dezenten Rand und einen Schatten genau richtig zu kombinieren. Dieser Generator lässt dich jeden Teil mit einer Live-Vorschau abstimmen und kopiert das exakte CSS, sodass du den Effekt ohne Ausprobieren bekommst.
So gehts (Schritt für Schritt)
- 1
Transparenz und Blur einstellen
Passe Hintergrunddeckkraft und Hintergrund-Blur an, um zu steuern, wie mattiert das Glas wirkt.
- 2
Rand und Schatten abstimmen
Füge einen dezenten hellen Rand und weichen Schatten hinzu, um dem Panel seine gläserne Kante und Tiefe zu geben.
- 3
CSS kopieren
Füge die erzeugte Regel auf dein Element ein — achte darauf, dass es über einem bunten oder Bildhintergrund sitzt, um den Effekt zu sehen.
Funktionsweise
Der Effekt schichtet ein paar CSS-Eigenschaften: eine halbtransparente Hintergrundfarbe, backdrop-filter: blur(), um alles hinter dem Element zu mattieren, einen dünnen hellen Rand, der die 'Kante' des Glases fängt, und einen weichen Schatten für Tiefe. Du stellst Blur, Transparenz und Farbe mit Reglern ein, während eine Vorschau über einem Hintergrund das Ergebnis zeigt, und kopierst dann die erzeugte Regel in dein Stylesheet.
Wann verwenden
Eine Karte, Navbar oder Modal gestalten, die über einem bunten Hintergrund oder Bild schwebt. Einer UI moderne, geschichtete Tiefe geben. Den Milchglas-Panel-Stil von iOS oder Windows nachahmen. Ein Overlay erstellen, das lesbar bleibt und zugleich den Inhalt dahinter zeigt. Einen Glaseffekt prototypisieren, bevor du ihn im Code festlegst. Lernen, wie backdrop-filter und Transparenz zusammenwirken.
Häufig Gestellte Fragen
backdrop-filter mattiert nur Inhalt hinter dem Element, es braucht also etwas Buntes oder ein Bild dahinter — über reinweißem Hintergrund gibt es nichts zu mattieren. Prüfe außerdem, dass der Elementhintergrund halbtransparent und nicht deckend ist.
Wichtige Hinweise
backdrop-filter ist GPU-intensiv; viele Glaspanels auf einer Seite, besonders animiert oder beim Scrollen, können das Rendering auf schwächeren Geräten verlangsamen. Setze den Effekt sparsam auf Schlüsselelementen ein.