Glassmorphism-Generator

Glassmorphism ist ein moderner UI-Design-Trend, der einen Milchglas-Look durch die Kombination eines halbtransparenten Hintergrunds, eines Hintergrundunschärfe-Filters, eines dezenten Rahmens und manchmal eines weichen Schattens erzeugt. Er verleiht Elementen ein geschichtetes, tiefenreiches Aussehen, das auf Landing Pages, Dashboards und Karten beliebt ist.

Die CSS-Eigenschaft backdrop-filter wendet grafische Effekte wie Unschärfe auf den Bereich hinter einem Element an. In Kombination mit einem halbtransparenten Hintergrund erzeugt sie den Milchglas-Look. Das Präfix -webkit-backdrop-filter ist für vollständige Safari-Unterstützung erforderlich.

backdrop-filter wird von allen modernen Browsern unterstützt: Chrome, Edge, Firefox (v103+), Safari und Opera. Das -webkit-Präfix deckt ältere Safari-Versionen ab. Internet Explorer unterstützt diese Eigenschaft nicht. Das generierte CSS enthält sowohl die Standard- als auch die Präfix-Version für maximale Kompatibilität.

Ein Blur-Wert zwischen 8px und 20px erzeugt in der Regel den besten Milchglas-Look. Werte unter 4px wirken zu scharf, während Werte über 30px zu stark verschwommen wirken können. Der ideale Wert hängt von der Komplexität Ihres Hintergrunds ab — hochdetaillierte Hintergründe profitieren von höheren Blur-Werten.

Glassmorphism benötigt einen farbenfrohen oder komplexen Hintergrund, um sichtbar zu sein. Wenn der Hintergrund hinter der Karte einfaches Weiß oder eine einzige Volltonfarbe ist, haben Unschärfe und Transparenz keinen sichtbaren Inhalt zum Vermischen. Verwenden Sie die Hintergrundfarbverlauf- oder Bildoptionen, um der Vorschau einen farbenfrohen Hintergrund hinzuzufügen.

Kopieren Sie den CSS-Code über die Schaltfläche CSS kopieren und fügen Sie ihn in Ihr Stylesheet ein. Wenden Sie die Klasse .glass-card auf Ihr HTML-Element an. Stellen Sie sicher, dass der übergeordnete Container einen farbenfrohen Hintergrund oder ein positioniertes Hintergrundbild hinter der Glaskarte hat, damit der Effekt korrekt erscheint.

Die Glas-Deckkraft steuert, wie transparent der Kartenhintergrund selbst ist — niedrigere Werte lassen mehr vom Hintergrund durchscheinen. Die Rahmen-Deckkraft steuert unabhängig die Sichtbarkeit des Rahmenlichts der Karte, das normalerweise eine halbtransparente weiße Linie ist, die der Glaskante einen realistischen Glanz verleiht.

Ja! Aktivieren Sie den Hintergrundfarbverlauf-Schalter in den Glaseinstellungen. Sie können dann zwei Farben und einen Winkel wählen, um einen linearen Farbverlaufshintergrund für die Glaskarte zu erstellen. Der Deckkraft-Schieberegler wird auf beide Farbverlaufshaltepunkte angewendet und bewahrt die Milchglas-Transparenz.

Das Tool enthält sechs Voreinstellungen: Helles Glas (klassisches weißes Milchglas), Dunkles Glas (dunkles halbtransparentes Panel), Gefroren (starke Unschärfe, hohe Deckkraft), Farbenfroh (lila-rosa Farbverlaufsglas), Minimal (kaum sichtbare Glasschicht) und Lebhaft (Cyan-Türkis-Glas auf kräftigem Hintergrund).

Wechseln Sie den Hintergrundszenen-Schalter zu Bild-URL und fügen Sie einen direkten Link zu einem Bild ein. Die Vorschau zeigt Ihr Bild als Hintergrund hinter der Glaskarte. Öffentlich zugängliche Bild-URLs funktionieren am besten.

backdrop-filter kann GPU-intensiv sein, besonders bei hohen Blur-Werten oder vielen Glaselementen auf derselben Seite. Für die Performance halten Sie Blur-Werte vernünftig (unter 20px), vermeiden Sie das Stapeln vieler Glasschichten und testen Sie auf leistungsschwächeren Geräten.

Absolut. Glassmorphism funktioniert gut auf Buttons, Navigationsleisten, Seitenleisten, Modals, Tooltips und jedem schwebenden UI-Element. Halten Sie den Rahmenradius für den Elementtyp angemessen und stellen Sie ausreichenden Farbkontrast zwischen Text und Glashintergrund für die Lesbarkeit sicher.