Glassmorphism Generator
Erstellen Sie Glassmorphism CSS-Effekte.
Glasmorphismus
Frostglas-Effekt mit Verschmutzung und Transparenz für moderne Schnittstellen.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.4);
Online-Generator für CSS-Glassmorphism-Effekte
Glassmorphism (oder Glasmorphismus) ist ein Interface-Design-Trend, der den Effekt eines transluzenten Milchglases simuliert. Er zeichnet sich durch halbtransparente Hintergründe mit einem Unschärfeeffekt (Blur) aus, der es ermöglicht, teilweise zu sehen, was hinter dem Element liegt, und ein Gefühl von Tiefe und Schichtung erzeugt. Dieser Stil wurde von Apple in macOS Big Sur und iOS populär gemacht und hat sich seitdem zu einem der beliebtesten UI-Design-Trends entwickelt.
Unser Glassmorphism-Generator ermöglicht die visuelle Anpassung aller Effektparameter: den Unschärfegrad (backdrop-filter: blur), die Hintergrundtransparenz (rgba alpha), die Stärke und Transparenz des Rahmens und den Eckenradius. Die Vorschau wird in Echtzeit aktualisiert und zeigt den Effekt auf einem farbigen Hintergrund mit dekorativen Formen, sodass Sie genau sehen können, wie der Effekt in einem realen Kontext aussehen wird.
Der generierte CSS-Code enthält sowohl die Standard-Eigenschaft backdrop-filter als auch das Präfix -webkit- für die Kompatibilität mit Safari. Glassmorphism funktioniert in allen modernen Browsern (Chrome, Firefox, Safari, Edge) und ist ideal für Karten, Modals, Navigationsleisten, schwebende Menüs und jedes Element, das über visuelle Inhalte wie Bilder oder Verläufe gelegt wird.
Häufig gestellte Fragen
Ist es mit allen Browsern kompatibel?
Die Eigenschaft backdrop-filter ist mit Chrome, Safari, Edge und Firefox (ab Version 103) kompatibel. Für Safari wird das Präfix -webkit- benötigt, das unser Generator automatisch einfügt. Internet Explorer unterstützt es nicht.
Beeinträchtigt Glassmorphism die Leistung?
Der Blur-Effekt kann GPU-Ressourcen beanspruchen, besonders bei hohen Werten auf mobilen Geräten. Für bessere Leistung verwenden Sie moderate Blur-Werte (4-15px) und wenden Sie den Effekt auf wenige Elemente gleichzeitig an.
Brauche ich einen speziellen Hintergrund, damit es funktioniert?
Ja, Glassmorphism benötigt Inhalte hinter dem Element (Bilder, Verläufe, Farben), damit der Unschärfeeffekt sichtbar ist. Auf einem weißen einfarbigen Hintergrund ist der Effekt praktisch unsichtbar.
Mehr erfahren? Lesen Sie unseren vollständigen Leitfaden →