01
Element wählen
Erstelle einen Glass Button, eine Info-Card oder ein Badge und wähle einen passenden Look.
Free Glass Effect Generator · HTML + CSS
Make it
look like glass.
Erstelle Liquid Glass Buttons, fotorealistische Glass-Effekte und schwebende Glass Cards – direkt im Browser, mit animierter Live-Vorschau und kopierbarem HTML/CSS-Snippet.
100 % kostenlosKein Login, kein Framework erforderlich.
Live Glass PreviewAnimierte Orbs, Raster und Lichtstreifen.
Code zum MitnehmenEinbettbare HTML- und CSS-Snippets.
01 / Live tool
Dein Glass-Effekt.
Deine Regeln.
Element auswählen, Look konfigurieren, sofort sehen, wie sich das Glas vor einem bewegten Hintergrund verhält – und den fertigen Code übernehmen.
1 Element auswählen
2 Oberfläche gestalten
3 Vorschau konfigurieren
Die Live-Vorschau verwendet echte Canvas-Pixelverzerrung. Der optionale SVG-Filter im exportierten CSS ist experimentell und browserabhängig.
LIVE PREVIEWMove · Observe · Adjust
● ANIMATED BACKGROUND
Der Regler verzerrt echte Hintergrundpixel in der Live-Vorschau.
HTML + CSS + optionaler SVG-Filter
Alles wird lokal in deinem Browser erzeugt. Keine Bibliotheken oder externen Skripte erforderlich.
02 / How it works
Liquid Glass verstehen.
Glas ist nicht einfach nur transparent. Entscheidend ist das Zusammenspiel aus Unschärfe, Licht, Tiefe und optischer Verzerrung.
Was ist der Liquid Glass Effekt?
Ein Liquid Glass Effekt simuliert eine durchscheinende, räumlich wirkende Glasoberfläche. Anders als klassisches Glassmorphism betont er neben Blur und Transparenz auch Glanzlichter, Reflexe und manchmal optische Verformungen im Hintergrund.
Welche CSS-Eigenschaften brauche ich?
backdrop-filter sorgt für die Unschärfe der Fläche dahinter. Halbtransparente Gradients lassen Farben durchscheinen, während helle Borders und innere Schatten eine glaubwürdige Glaskante erzeugen. Für fotorealistische Glass Buttons ist die Kombination wichtiger als ein einzelner CSS-Wert.
Was machen SVG feTurbulence und feDisplacementMap?
feTurbulence erzeugt ein organisches Noise-Feld. feDisplacementMap nutzt dieses Feld, um Pixel an unterschiedlichen Stellen verschieden stark zu versetzen. Das ergibt den Eindruck einer ungleichmäßigen, fließenden Glasoberfläche.
Wichtiger Browser-Hinweis
Die Nutzung eines SVG-Filters als
Die Nutzung eines SVG-Filters als
backdrop-filter: url(#...) wird nicht überall gleich dargestellt. Der Generator liefert deshalb zuerst einen robusten CSS-Glaslook; SVG-Brechung ist eine zuschaltbare Erweiterung. Die Canvas-Live-Vorschau verzerrt echte Pixel. Der kopierte reine HTML/CSS-Code verwendet dagegen einen stabilen Blur-Fallback; eine identische dynamische Canvas-Verzerrung benötigt zusätzlich JavaScript.Ist das Apple Liquid Glass?
Der Look erinnert an Apples Liquid-Glass-Designsprache, ist aber eine unabhängige HTML/CSS-Nachbildung. Dieser Generator ist nicht von Apple entwickelt, zertifiziert oder unterstützt. Der hier erzeugte Glass-Effekt ist für eigene Webdesigns gedacht.
03 / Quick start
In 3 Schritten einbinden.
02
Werte anpassen
Justiere Blur, Rundung, Deckkraft und optional den SVG-Filter in der animierten Live-Ansicht.
03
Snippet kopieren
Füge HTML an die gewünschte Stelle ein und das CSS in dein Stylesheet oder deinen Style-Block.
Tipp: Setze das Glaselement vor kontrastreiche Hintergründe – auf rein weißen Flächen ist der Effekt naturgemäß schwer zu sehen.
04 / Inspiration
Ein Material.
Viele Möglichkeiten.
Glass CTA Button
Gläserner Call-to-Action mit weichen Reflexen und abgerundeten Kanten.
✧ Crystal clear
Glass Badge
Für Labels, Feature-Tags und schwebende Status-Elemente.
GLASS UI
A new
perspective.
DISCOVER ↗perspective.
Glass Card
Für Hero-Inhalte, Produktfeatures und transparente Oberflächen.
05 / FAQ
Häufige Fragen.
Wie erstelle ich einen Liquid Glass Button mit CSS?
Verwende eine transparente Fläche, einen hellen Rand, innere Glanzlichter und backdrop-filter: blur(...). Wähle oben „Glass Button“ und kopiere den automatisch generierten Code.
Was ist der Unterschied zwischen Glassmorphism und Liquid Glass?
Glassmorphism setzt häufig vor allem auf Frosted Glass, also Blur und Transparenz. Liquid-Glass-Ästhetik betont zusätzlich räumliche Kanten, Reflexionen und gegebenenfalls optische Verzerrungen.
Was bewirken feTurbulence und feDisplacementMap?
feTurbulence erzeugt Noise; feDisplacementMap verschiebt die Pixel anhand dieses Noise-Felds. Für Hintergrundbrechung muss der Browser SVG-Filter im Backdrop-Pfad unterstützen.
Funktioniert der Glass-Effekt in Safari, Chrome und Firefox?
Der CSS-Kern mit Blur und transparenten Flächen wird in modernen Browsern weitgehend unterstützt. SVG-Filter in backdrop-filter sind browserabhängig. Deshalb bleibt ein CSS-Fallback bestehen.
Ist das identisch mit Apples Liquid Glass?
Nein. Es handelt sich um eine eigenständige visuelle Webtechnik, die sich an zeitgenössischer Glasästhetik orientiert und keine offizielle Apple-Technologie implementiert.
Kann ich die Buttons kommerziell verwenden?
Ja, den auf dieser Seite generierten einfachen HTML- und CSS-Beispielcode kannst du in eigenen Projekten verwenden. Bitte überprüfe die technischen und rechtlichen Anforderungen deines konkreten Projekts selbst.
Wie mache ich einen Glass Button barrierearm?
Nutze ein echtes <button>- oder <a>-Element, sichtbare Tastatur-Fokuszustände, ausreichenden Kontrast und bei Animationen eine reduzierte Bewegung für Nutzer mit entsprechender Systemeinstellung.