CSS-Generator für hochauflösende Glaseffekte

 (glass3d.dev)
5 Punkte von GN⁺ 2025-07-04 | 1 Kommentare | Auf WhatsApp teilen
  • Zeigt, wie sich mit CSS-Code ein hochauflösender Glas-Effekt umsetzen lässt
  • Wendet visuelle Filter wie blur, brightness, saturate sowie mehrstufige Schatten an
  • Nutzt Pseudo-Elemente, um Layer-Effekte und Texturen für Vorder- und Rückseite zu erzeugen
  • Lässt sich mit nur einer schlanken CSS-Klasse auf verschiedene UIs anwenden und anpassen
  • Eignet sich gut, um hochauflösende Glaseffekte schnell und modern in Webprojekte einzuführen

Einführung

Dieser CSS-Code ist speziell darauf ausgelegt, in Web-UIs einen hochauflösenden Glas-Effekt zu erzeugen. Im Vergleich zu herkömmlichen Glassmorphism-Effekten sind feinere und räumlichere Darstellungen möglich, und das Ergebnis lässt sich durch das Anwenden einer einzigen CSS-Klasse direkt nachvollziehen.

Hauptinhalte

  • Die Klasse .glass3d kombiniert verschiedene visuelle Filtereffekte wie blur(32px), brightness(0.85) und saturate(2.5) sowie Farb- und Rauschtexturen
  • Eine mehrstufige box-shadow-Konfiguration erzeugt den Eindruck von realistisch dreidimensionalem Glas
  • Im ::before-Pseudo-Element werden backdrop-filter, Farben und ein Rausch-Hintergrundbild überlagert, um Transparenz und räumliche Textur zu erzeugen
  • Im ::after-Pseudo-Element wird ein innerer (inset) Schatten ergänzt, der den Effekt von Lichtreflexionen auf einer echten Glasoberfläche vermittelt
  • Durch die Trennung per z-index sind die Ebenen so strukturiert, dass sich die Effekte nicht gegenseitig stören und korrekt dargestellt werden
  • Über den Selektor .glass3d > * wird sichergestellt, dass der Inhalt von Kindelementen immer ganz oben angezeigt wird

Nutzungskontext und Vorteile

  • Ohne Bibliotheken oder externe Abhängigkeiten lässt sich mit einer einzigen CSS-Klasse ein modernes und trendiges Glas-Effekt-UI umsetzen
  • Da sich der Effekt leicht auf UI-Design-Systeme, Karten, Pop-ups und Buttons anwenden und erweitern lässt, ist er für Web-Frontend-Entwickler besonders nützlich
  • Durch Texturen auf Basis realer Musterbilder, vielfältige Farbkombinationen und mehrstufige Schatten bietet der Ansatz gegenüber klassischen Glassmorphism-Techniken Vorteile bei Tiefenwirkung sowie Hell-Dunkel-Abstufungen

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-07-04
Hacker-News-Kommentare

  • Ich habe eine Version erstellt, die mit JavaScript einen echten Brechungseffekt auf Seitenelemente anwendet; schau sie dir gern an: https://real-glass.vercel.app/

  • Dieser Effekt hat die Einschränkung, dass nur die Pixel direkt hinter der Oberfläche unscharf gemacht werden. Eine gute Erklärung dieses Phänomens findest du im Artikel von Josh Comeau (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) sowie in der Hacker-News-Diskussion dazu (https://news.ycombinator.com/item?id=42302907). Wenn sich der Hintergrund bewegt, ist das ein ziemlich wichtiges Thema, bei statischem Hintergrund meist eher nicht.

    • Ich habe Joshs großartigen Artikel gelesen und versucht, das Tutorial nachzubauen. Dabei gab es aber Probleme mit border-radius in Verbindung mit einer SVG-Maske. Bei hartkodierten Elementen funktionierte es gut, aber ich überlege noch, wie man das für eine ganze Komponentenbibliothek nutzen kann, in der sich border-radius je nach Brand-/Container-Query verändert.
    • Joshs Lösung fühlt sich auch intuitiv irgendwie falsch an. Sie setzt voraus, dass umliegende Elemente aus einem leuchtenden Material bestehen, aber ich halte das nicht für eine physikalische Grundeigenschaft von „Material“ im Web. Für mich ist Material eher grundlegend mit Papier vergleichbar.

  • Ziemlich cool umgesetzt, aber ohne den Brechungseffekt von Glas geht die starke visuelle Trennung der Ebenen bei Liquid Glass verloren. Wenn man sich die Design-Ressourcen von Material ansieht, wird betont, dass eine App aus konsistenten beweglichen 3D-Ebenen bestehen sollte. In der Praxis wird das aber in 2D umgesetzt, und wenn sich alle Elemente vermischen, wird die Trennung der Ebenen sehr schwierig. Häufig finden Leute Action-Buttons in den Ecken nicht. Bewegung hilft zwar dabei, Chrome und Inhalt zu unterscheiden, aber visuell sticht das nicht besonders hervor. Der größte Vorteil von Liquid Glass ist meiner Meinung nach die Edge Distortion. Sie erzeugt bei bewegten Inhalten eine nichtlineare Bewegung, die das menschliche Auge sofort wahrnimmt. Dadurch wird die Ebenentrennung bei Bewegung deutlicher. Dieser wichtige Brechungsaspekt fehlt hier. Edge Distortion mit SVG-Filtern umzusetzen, ist nicht einfach und am Ende ziemlich komplex. An der schrittweisen Erklärung hier lässt sich die Komplexität gut erkennen: https://atlaspuplabs.com/blog/liquid-glass-but-in-css/…. Ich habe außerdem eine CodePen-Spark-Sammlung mit verschiedenen Liquid-Glass-Umsetzungen entdeckt und empfehle auch diese recht gelungene Referenz mit hartkodiertem SVG: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Ich denke, Apple hat sich mit Liquid Glass einen cleveren Burggraben geschaffen. Eine billige Version kann jeder leicht bauen, aber es ist extrem schwer, es wirklich echt aussehen zu lassen. Wir sehen jeden Tag echtes Glas und können daher intuitiv zwischen „echt“ und „fake“ unterscheiden. Deshalb wirken Nachahmungen oft erkennbar unecht, und Apple kann sein „Premium-Gefühl“ bewahren.
    • Ich finde die Edge Distortion von Liquid Glass wirklich großartig und plane, sie irgendwann unbedingt noch einmal nachzubauen. Bei meinem aktuellen Projekt liegt der Fokus auf Feinschliff, Browser-Kompatibilität und der Umsetzung eines solchen Materials ohne echtes 3D. Ich stimme auch zu, dass der Effekt stärker hervortritt, wenn sich Ebenen über einem statischen Hintergrund bewegen. Die Demo-Site, an der ich gerade arbeite, enthält solche Effekte bereits, ist aber noch nicht fertig. Danke für die guten Hinweise.
    • Ich stimme zu, dass der Brechungseffekt von Glas eine geschichtete visuelle Trennung erzeugt. Ich finde den Brechungseffekt aber zu unruhig und in manchen Umgebungen unschön. Es ist zwar ein reales physikalisches Phänomen von Glas, aber nicht unbedingt notwendig. Für mich wirkt es wie eine vergrößerte Neuauflage des Elements, das ich am Skeuomorphismus am wenigsten mochte. Zur Einordnung: Ich mochte das Design vor iOS 7 lieber.

  • Der Effekt an sich ist cool, aber für mich fühlt es sich nicht wirklich nach Glas an. Der unmittelbarste Unterschied ist, dass das Licht überhaupt nicht auf die Bevels reagiert. Ich würde auch erwarten, dass Licht vom Glas reflektiert wird und dadurch Beleuchtung und Farbe beeinflusst. Mit einem simplen Blur-Effekt allein ist das schwer hinzubekommen. Außerdem kann Glas charakteristische Schatten erzeugen, insbesondere Caustics, aber darum scheint sich auch Apple nicht gekümmert zu haben. Die aktuellen Schatten wirken eher wie einfache Drop Shadows und betonen dadurch eher den Eindruck einer flachen Karte als eines 3D-Objekts. Das verfehlt den Kern des aktuellen Trends. So etwas nur mit CSS umzusetzen, ist schwierig; dafür wären Shader auf der GPU vermutlich besser geeignet.

    • Wenn es mit CSS nicht geht, frage ich mich, was dann der richtige Weg wäre. Ich bin auch unsicher, ob man GPU-Shader-Effekte auf ein normales div anwenden kann. Wenn man grundlegendes HTML nicht direkt mit GPU-Effekten versehen kann, wäre es am Ende vielleicht besser, mit etwas wie einer Custom-Canvas-Lösung gleich eine neue Rendering-Engine zu bauen. HTML hat ohnehin kaum noch Bedeutung und dient mit <p>-Tags nur noch zur Textausgabe, während der Rest Werbung ist. Dann könnte man auch gleich nur <p> behalten und mit besserer GPU-Integration komplett neu anfangen.

  • Ich sammle solche Design-Beispiele: https://github.com/swyxio/spark-joy
    Hier noch ein paar passende Ressourcen:

    • https://ui.glass/generator/ : kostenloser CSS-Generator im Glassmorphism-Stil
    • Frosted-Glass-Sticky-Header: https://www.joshwcomeau.com/css/backdrop-filter/
    • Glassmorphism-Pen-Beispiele: codepen, im Kontext
    • CSS-Beispiel für Blur- plus Rotationseffekt 
      .blur-and-rotate {
 border-radius: 20px;
 backdrop-filter: blur(20px) hue-rotate(120deg);
 -webkit-backdrop-filter: hue-rotate(120deg);
}
    • Danke, dass du dieses Projekt zur Spark-Joy-Liste hinzugefügt hast.
    • Ich finde Spark Joy eine wirklich großartige Ressource.
    • Ich habe einen ASCII-Font-Generator gefunden, der wohl nicht in Spark Joy enthalten ist. Stattdessen empfehle ich ein Tool, das ich oft benutze: https://patorjk.com/software/taag/…

  • Auf dem Smartphone wäre die Nutzbarkeit wohl deutlich besser, wenn es eine Option gäbe, die Boxen auszublenden oder einzuklappen. Im Vollbild nehmen die Boxen fast den ganzen Bildschirm ein, sodass man den Effekt dahinter kaum sieht. Trotzdem interessant, ich werde es auf einem größeren Bildschirm noch einmal ausprobieren. Eine Option zum Ausblenden der Boxen wäre sehr hilfreich.

  • Scheint eine ähnliche Technik zu verwenden wie meine Glass-Implementierung: https://news.ycombinator.com/item?id=42225481, insbesondere der intensive Einsatz von box-shadow ist ähnlich.

    • Dein Projekt ist wirklich großartig. Es freut mich zu sehen, dass ich nicht der Einzige bin, der mehrere Schattenebenen mit viel Tiefenwirkung verwendet. Die Idee mit den Light Rays fand ich besonders beeindruckend.

  • Eignet sich gut als Effekt für Web-Hintergründe.

  • Auf meinem Handy ist das Scrollen ziemlich langsam. Ich frage mich, ob es absichtlich noch einen anderen langsamen Scroll-Effekt gibt oder ob das eine Nebenwirkung des Glass-Effekts ist.

    • Interessanter Hinweis. Auf der Seite gibt es keinerlei Scroll-Effekt. Es wäre hilfreich, wenn du mitteilen könntest, welches Gerät, welchen Browser und welche Netzwerkumgebung du tatsächlich verwendest.
    • Auf meinem M4-Gerät mit 128 GB RAM läuft es problemlos.

  • Wirklich sehr gut gemacht. Ich bin immer wieder überrascht, dass Computergrafik nicht „der eine besondere Trick“ ist, sondern in Wirklichkeit „fünf Schichten aus Tricks“. Ich denke auch, dass Cross-Browser-Support eine große Herausforderung ist. Hast du ein Gefühl dafür, welcher Teil am meisten Ressourcen verbraucht? Ich würde einfach vermuten, dass es backdrop-filter ist.

    • Ich hätte auch nicht gedacht, dass dafür mehrere Tricks nötig sind. Der schwerste Teil ist die Blur-Verarbeitung von backdrop-filter. Je höher der Blur-Wert, desto mehr umliegende Pixelinformationen müssen für das Rendering berücksichtigt werden. Ein weiterer ressourcenintensiver Teil ist die Echtzeit-Aktualisierung des Glass-Looks beim Scrollen oder wenn sich der Video-Hintergrund verändert.
    • Manchmal braucht man selbst dann „fünf Schichten aus Tricks“, wenn man nur etwas „zentrieren“ will.