Glassmorphism ist ein UI-Designstil mit Milchglas-Effekten: halbtransparente Ebenen, Hintergrund-Unschärfe und feine Ränder, durch die Hintergrundfarben hindurchschimmern. Von Apple und Microsoft populär gemacht, ist er heute eine Standardtechnik des modernen Interface-Designs.
Passe Unschärferadius, Weiß-Transparenz, Rahmenbreite und Eckenradius an, um deine Glaskarte zu gestalten. Die Vorschau zeigt ein realistisches Milchglas-Panel über einem bunten Hintergrund, und der CSS-Output enthält das -webkit--Präfix für Safari-Kompatibilität.
Frequently Asked Questions
Q: Was ist backdrop-filter?
Was ist backdrop-filter? Es wendet visuelle Effekte (wie Unschärfe) auf alles HINTER einem Element an. Anders als filter, das das Element selbst betrifft, weicht backdrop-filter nur den Hintergrund auf und hält die Glasebene scharf.
Q: Funktioniert Glassmorphism in allen Browsern?
Funktioniert Glassmorphism in allen Browsern? Alle modernen Browser unterstützen backdrop-filter. Safari benötigt das Präfix -webkit-backdrop-filter, das im generierten CSS automatisch enthalten ist.
Q: Ist Glassmorphism 2026 noch im Trend?
Ist Glassmorphism 2026 noch im Trend? Ja. Es hat sich vom Trend zu einer etablierten Designsprache entwickelt, die von Apple, Microsoft und Fintech-Apps wie Revolut und N26 genutzt wird.
Q: Welcher Hintergrund eignet sich am besten für Glaskarten?
Welcher Hintergrund eignet sich am besten für Glaskarten? Kräftige Farbverläufe in Lila, Blau, Rosa oder Petrol funktionieren am besten. Der Hintergrund sollte farbig genug sein, um durch die Milchglas-Schicht zu scheinen.
Q: Beeinträchtigt backdrop-filter die Leistung?
Beeinträchtigt backdrop-filter die Leistung? Ein paar Glaselemente haben vernachlässigbare Auswirkungen. Dutzende gestapelte backdrop-filters können das Scrollen auf schwachen Geräten verlangsamen — nutze sie nur auf wichtigen Flächen.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.