CSS-Generator für hochauflösende Glaseffekte

 (glass3d.dev)
5 Punkte von GN⁺ 2025-07-04 | 1 Kommentare | Auf WhatsApp teilen
  • Der glass3d generator ist ein Tool, mit dem sich CSS mit Glastextur durch Ändern von Einstellungen sofort in der Vorschau anzeigen und kopieren lässt
  • Die zentralen Anpassungswerte bestehen aus blur, brightness, saturation von backdrop-filter sowie der Auswahl von Farbe und Textur
  • Farben werden mit HSL und Alphawert behandelt; ein Beispielwert ist hsl(189 80% 10% / 0.2)
  • Als Texturen stehen rice paper, egg shell, ink jet, coarse und topology zur Auswahl
  • Das generierte CSS kombiniert .glass3d, ::before, ::after und das z-index von Kindelementen, um Hintergrundfilter, Rauschtextur, innere Schatten und die Inhaltsebene zu trennen

Werte, die sich im glass3d generator anpassen lassen

  • Wenn die Einstellungen geändert werden, wird das Ergebnis sofort direkt in der Oberfläche übernommen
  • Das fertige CSS kann kopiert und verwendet werden
  • Die wichtigsten Einstellungsoptionen sind:
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

Struktur des generierten CSS

  • Die Klasse .glass3d definiert CSS-Variablen und die Basis für die Ebenen
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: egg-shell.png von transparenttextures.com
    • Verwendet position: relative, z-index: 4 und mehrstufige box-shadow
  • .glass3d::before wendet Hintergrundfilter und Textur an
    • Für -webkit-backdrop-filter und backdrop-filter wird var(--filter-glass3d) verwendet
    • In background-color und background-image werden jeweils die Farbvariable und die Rauschvariable eingesetzt
    • Setzt background-size: 100px und background-repeat: repeat
  • .glass3d::after fügt innere Highlight-Schatten hinzu
    • Verwendet mehrere Werte für inset box-shadow
  • .glass3d > * setzt position: relative und z-index: 6, damit der Inhalt darüber sichtbar ist

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-07-04
Kommentare auf Hacker News

  • Dieser Ansatz hat das Problem, dass der Blur nur auf die Pixel direkt hinter der Oberfläche angewendet wird; das wird unter https://www.joshwcomeau.com/css/backdrop-filter/#the-issue gut gezeigt.
    Zusammen mit der Diskussion unter https://news.ycombinator.com/item?id=42302907 lesenswert. Wenn sich der Hintergrund darunter bewegt, ist das Problem, dass nur die direkt dahinterliegenden Pixel verschwommen werden, ziemlich wichtig; bei einem statischen Hintergrund ist es normalerweise nicht besonders relevant.

    • Nachdem ich Joshs hervorragenden Artikel gelesen hatte, habe ich auch das Tutorial umgesetzt, bin aber bei dem Teil mit dem border-radius per SVG-Maske auf Probleme gestoßen.
      Bei hartcodierten Elementen funktionierte es gut, aber wie man das in einer ganzen Komponentenbibliothek zum Laufen bringt, in der sich der border-radius je nach Branding des Nutzers und Container Queries ändert, ist noch ungelöst.
    • Joshs Lösung wirkt intuitiv ebenfalls falsch. Sie scheint anzunehmen, dass nahe Elemente Lichtquellen sind, aber es ist schwer zu sagen, dass „Materialien“ im Web standardmäßig solche physikalischen Eigenschaften haben.
      Ich würde das Standardmaterial eher als papierähnlich betrachten.
    • Es ist schwer zu sagen, welche Seite richtiger ist. Der Standardansatz nähert Objekte direkt hinter Milchglas an, während die angepasste Variante Objekte imitiert, die viel weiter entfernt sind.
      Für mich kollidiert die angepasste Version mit Tiefenhinweisen und wirkt dadurch deutlich ablenkender und falscher.

  • Sieht ziemlich gut aus, aber wenn die Lichtbrechung des Glases fehlt, geht das starke Gefühl getrennter Ebenen verloren, das ich für den größten Beitrag von Liquid Glass halte.
    Für Material gibt es hervorragende Designmaterialien, die in seitlichem 3D zeigen, dass eine App aus konsistent bewegten Ebenen bestehen sollte. Wenn man das aber in 2D zusammenführt, wird es sehr schwer zu erkennen, welche Funktion wo ist. Es kommt wirklich oft vor, dass Leute die Action-Buttons in den Ecken nicht sehen.
    Bewegung hilft ein wenig dabei, Chrome und Inhalt zu unterscheiden, aber es gibt zu wenige visuelle Elemente, die das klar definieren. Der größte Vorteil von Liquid Glass ist meiner Meinung nach die Verzerrung an den Rändern. Wenn sich Inhalte bewegen, entsteht nichtlineare Bewegung, und das menschliche Sehen nimmt das sofort wahr.
    Statische Screenshots sehen nicht immer gut aus, aber in Bewegung lassen sich Elemente deutlich besser unterscheiden als bei allem, was ich bisher gesehen habe. Das zentrale Brechungselement, das die menschliche Bewegungserkennung stark ausnutzt, fehlt hier.
    Ich hatte früher noch eine hervorragende Web-Demo gesehen, kann sie jetzt aber kaum finden. Stattdessen läuft diese Demo auf Mobilgeräten schlecht und sieht visuell weniger gut aus, zeigt aber Schritt für Schritt gut, wie komplex die Arbeit ist. Randverzerrung nur mit SVG-Filtern umzusetzen, ist ein ziemlich harter Weg: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    Ich habe auch eine Sammlung von Liquid-Glass-Versuchen gefunden (CodePen Spark); den zweiten Link halte ich für ein ziemlich gut gemachtes Beispiel mit sehr konkret vordefiniertem, hartcodiertem SVG: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Ich glaube, Apple hat mit Liquid Glass einen cleveren Burggraben geschaffen. Schlechtere Versionen lassen sich leicht bauen, aber sie haben sich für einen Effekt entschieden, der in der wirklich korrekten Umsetzung sehr schwierig ist.
      Menschen sehen jeden Tag echtes Glas und haben daher eine Intuition dafür, was echt und richtig wirkt. Deshalb sehen Nachahmungen offensichtlich schlechter aus, und Apple kann sein Produktimage von „wirkt hochwertig“ aufrechterhalten.
    • Ich stimme zu, dass die Randverzerrung von Liquid Glass cool aussieht, und ich habe vor, sie später selbst nachzubauen.
      In meinem aktuellen Projekt war das Ziel, ein Material zu schaffen, das ausgefeilt wirkt, browserübergreifend konsistent funktioniert und kein echtes 3D verwendet. Es stimmt auch, dass der Effekt besser sichtbar ist, wenn es sich über einem festen Hintergrund bewegt. Auf der Demo-Site der Bibliothek, an der ich arbeite, mache ich das so, aber sie ist noch nicht fertig.
    • Dass der Brechungseffekt fehlt, ist sogar gut. Milchglas finde ich schon ziemlich fragwürdig, aber den Brechungseffekt mag ich wirklich nicht. Er lenkt zu sehr ab und wird in bestimmten Situationen zwangsläufig immer hässlich aussehen.
      Ich weiß, dass echtes Glas so funktioniert, aber ich möchte mich nicht damit beschäftigen müssen. Es fühlt sich so an, als hätte man die schlechtesten Teile des Skeuomorphismus herausgepickt und doppelt daraufgesetzt, und das sage ich selbst aus der Perspektive von jemandem, der die Zeit vor iOS 7 lieber mochte.

  • Es ist ein schöner Effekt, aber für mich fühlt er sich nicht wie echtes Glas an.
    Der unmittelbarste Unterschied ist, dass das Licht nicht mit der Fase interagiert. Ich würde erwarten, dass Licht wieder ins Glas eintritt und auch Beleuchtung und Farbe beeinflusst. Nur Blur hinzuzufügen reicht nicht.
    Außerdem kann Glas eigene Schatten und interessante Kaustikmuster haben. Hier sieht man zwar Schatten, aber sie wirken wie ein einfacher Drop Shadow, sodass es eher wie eine flache Karte aussieht als wie ein physisches 3D-Objekt, das Teil eines neuen Flusses ist.
    Jedenfalls ist das nur mit CSS nicht leicht nachzuahmen; ein Shader, der auf der GPU läuft, scheint besser geeignet.

    • Wenn es mit CSS nicht geht, weiß ich nicht, wie man es machen sollte. Wie könnte man einen GPU-Shader-Effekt auf ein normales div anwenden? Wenn man GPU-Effekte nicht auf grundlegendes HTML anwenden kann, sondern auf Custom Elements wie irgendeine Canvas-Kombination ausweichen muss, wäre es vielleicht besser, gleich eine komplett neue Rendering-Engine zu bauen, auf die man GPU-Effekte anwenden kann.
      Meiner Meinung nach ist HTML tot. Für die Übermittlung von Text reichen ein paar Tags, und das meiste andere wird dafür benutzt, Webseiten in Werbebomben zu verwandeln. Also wäre es besser, mit einem <text>-Tag und besserer GPU-Integration neu anzufangen und den Rest wegzulassen.

  • Ich habe eine JavaScript-Version gebaut, die Elemente auf der Seite tatsächlich bricht: https://real-glass.vercel.app/

    • In Safari funktioniert der Frosteffekt nicht.

  • Ich sammle solche Dinge hier: https://github.com/swyxio/spark-joy
    Weitere Ressourcen sind ein kostenloser CSS-Generator auf Basis der Glassmorphism-Design-Spezifikation https://ui.glass/generator/, ein Frosted-Glass-Sticky-Header https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism codepen und in context

    .blur-and-rotate {  
border-radius: 20px;  
backdrop-filter: blur(20px) hue-rotate(120deg);  
-webkit-backdrop-filter: hue-rotate(120deg);  
}

  • Wirklich gut gemacht. Es überrascht mich immer wieder, dass Computergrafik weniger „ein seltsamer Hack“ ist als vielmehr 5 übereinandergestapelte Tricks
    Browserübergreifende Kompatibilität hinzubekommen, ist noch eine zusätzliche Herausforderung. Ich frage mich, ob du ein Gefühl dafür hast, welcher Teil die meisten Ressourcen verbraucht. Naiv würde ich auf backdrop-filter tippen

    • Stimmt, ich hätte nicht gedacht, dass für die Umsetzung so viele Tricks nötig sind
      Deine Intuition stimmt, der ressourcenintensivste Teil ist der Blur von backdrop-filter. Je höher der Blur-Wert, desto mehr benachbarte Pixel müssen vor dem Rendering „referenziert“ werden
      Ein weiterer teurer Faktor ist, dass ständig neu gezeichnet werden muss, wenn Scrollen oder ein Video-Hintergrund das Aussehen des Glases verändert
    • Manchmal braucht man sogar 5 Ebenen Tricks, um etwas „zentriert auszurichten“

  • Scheint eine ähnliche Technik zu verwenden wie meine Glas-Implementierung: https://news.ycombinator.com/item?id=42225481
    Besonders ähnlich ist die sehr intensive Nutzung von box-shadow

    • Das Projekt sieht cool aus. Schön zu sehen, dass ich nicht der Einzige bin, der bei Schatten mehr als 5 Ebenen tief geht. Besonders die Ergänzung Light Rays ist beeindruckend

  • Kleines Problem: Der Schatten zwischen dem oberen Bereich und dem Scrollbereich mit Toggles/Code verschwindet, wenn man nach unten scrollt. Vermutlich sollte er anfangs verborgen sein und dann erscheinen

    • Gut beobachtet. Es ist kein Fade-in-Problem, der Schatten scrollt einfach aus dem Bildschirm heraus
      Diese „Überhang“-box-shadows waren so gedacht, dass sie innerhalb eines Elements angewendet werden, nicht so, dass sie von einem Element nach unten geworfen werden. Mir ist klar geworden, dass ich in diesem Fall die zweite Art von Schatten einsetzen muss

  • Auf meinem Smartphone ist das Scrollen der Inhalte ziemlich langsam. Ich frage mich, ob es irgendeinen anderen Scroll-Effekt gibt, der es absichtlich verlangsamt, oder ob das eine Nebenwirkung des Glaseffekts ist

    • Interessant, aber auf der Seite gibt es nirgends einen Scroll-Effekt. Mich würde interessieren, welches Gerät, welchen Browser und welche Internetverbindung du verwendest
    • Auf einem M4 mit 128 GB RAM funktioniert es gut

  • Vielleicht habe ich etwas übersehen, aber auf Mobilgeräten wäre es viel nützlicher, wenn man die Box ausblenden oder einklappen könnte
    Im Moment nimmt sie den ganzen Bildschirm ein, sodass man den Effekt dahinter kaum sehen kann. Ich bin trotzdem interessiert und werde es später auf einem größeren Bildschirm noch einmal ausprobieren, aber eine Option zum Ausblenden der Box würde es deutlich besser machen

    • Meinst du den Bereich für die Code-Vorschau?
      In der ersten Implementierung hatte ich ein kleines Demo-Rechteck über der Generator-UI, aber selbst das kleine Element nahm zu viel Platz ein und machte die UI schwer bedienbar. Wenn die ganze Seite scrollt, war den Leuten nicht klar, dass sie ganz oben sein müssen, um das Rechteck zu sehen, das sie gerade bearbeiten, was frustrierend war
      Dieses Tool ist hauptsächlich fürs Coding gedacht, daher priorisiere ich die Desktop-Erfahrung; Mobile ist eher für eine schnelle Vorschau und als Nachweis gedacht, dass es auch auf Mobilgeräten funktioniert. Wenn du aber eine ähnliche UI kennst, die auf Mobile wirklich gut funktioniert, würde ich mir den Link gern ansehen