Zum Inhalt springen
Toolars
Erkunden
Fehler melden

Design · Lokal-Werkzeug

CSS-Glassmorphismus-Generator

CSS Glassmorphism Generator

Baue Milchglas-Panels mit Deckkraft, Hintergrund-Blur und Sättigung und kopiere das mehrschichtige CSS inklusive backdrop-filter in beiden Varianten.

Aufgabenpfad / von der Eingabe zum Ergebnis

Wähle den Glaston

Läuft lokal · Nichts wird hochgeladen

Wie CSS-Glassmorphismus-Generator funktioniert, Datenschutz und verwandte Tools

Aufgabenpfad / von der Eingabe zum Ergebnis

So baust du ein Glassmorphism-Panel

  1. 01

    Wähle den Glaston

    Wähle eine Farbe für Glaston. Die Vorschau lässt das Panel über zwei farbigen Kugeln schweben, sodass das Material gegen einen belebten Hintergrund beurteilt wird, so wie es auf einem echten Bildschirm sein wird.

  2. 02

    Lege Deckkraft und Blur fest

    Oberflächendeckkraft läuft von 0,05 bis 0,8 — niedriger heißt transparenter —, und Hintergrund-Blur von 0 bis 40 px weicht alles hinter dem Panel auf.

  3. 03

    Stimme Sättigung, Rahmen und Radius ab

    Sättigung (50–200 %) reichert den Hintergrund an oder dämpft ihn, Rahmendeckkraft (0–0,8) zeichnet die Kante in der Tonfarbe nach, und Eckenradius (0–48 px) rundet das Panel.

  4. 04

    Balanciere das Material

    Die Oberflächenregler spielen gegeneinander: Niedrige Deckkraft braucht mehr Blur, um als Glas zu lesen, und eine Sättigung über 100 % verhindert, dass ein belebter Hintergrund hinter einem blassen Ton ausgewaschen wirkt. Das Standardmaterial — weißer Ton bei 0,22 Deckkraft, 18 px Blur, 140 % Sättigung — ist eine bewährte Mitte.

  5. 05

    Kopiere das Panel-CSS

    Drücke CSS kopieren oder .css herunterladen, um toolars-glass-panel.css zu speichern. Die Regel .glass-panel kombiniert einen rgba-Hintergrund, backdrop-filter mit seinem -webkit--Zwilling, einen 1-px-Rahmen in der Tonfarbe und einen weichen Schatten.

  6. 06

    Plane den Fallback

    Fehlt backdrop-filter, bleiben rgba-Hintergrund, Rahmen und Schatten sichtbar. Backdrop blur auf null zu setzen ist nur ein grober Fallback-Test, weil der Sättigungsfilter weiterhin wirken kann. Prüfe das CSS in den Zielbrowsern und erhöhe bei Bedarf Surface opacity für Textkontrast.

Tool-Fakten

Verarbeitung
In deinem Browser
Eingabe verlässt dieses Gerät
Nie
Aufbewahrung
Nichts wird gespeichert
Preis
Kostenlos

Deine Eingabe bleibt im Browser.

CSS-Glassmorphismus-Generator nutzt seinen verifizierten lokalen Ausführungspfad und erstellt keinen versteckten Ein- oder Ausgabeverlauf.

Lokale Ausführung

Läuft im aktuellen Browser-Tab.

Keine versteckte Verarbeitung

Aktive Tool-Daten werden nie zu einem Toolars-Dokumentdatensatz.

Kein Konto erforderlich

Nutze den Kern-Workflow ohne Profil. Favoriten werden mit deinem Konto synchronisiert, sobald du dich anmeldest.

Sofortiges Zurücksetzen

Leere den Tab, und die aktiven Arbeitsdaten sind weg.

Was CSS-Glassmorphismus-Generator tatsächlich tut

Die schwebende Steuerleiste eines Musikplayers, eine Benachrichtigungskarte über einer Karte, ein Login-Panel vor einer Fotowand — Milchglas verkauft Tiefe, ohne die Seite zu verstecken. Der Effekt hängt vollständig davon ab, was dahinter liegt, weshalb diese Vorschau farbige Formen rendert, an denen der Blur arbeiten kann, und die ganze Erkundung läuft lokal — die Palette eines unveröffentlichten Interfaces verlässt also nie das Gerät. Sobald das Material balanciert ist, trägt die exportierte Regel jede Entscheidung mit.

Häufige Fragen

Welches CSS erzeugt der Export?
Eine .glass-panel-Regel: ein rgba-Hintergrund aus deinem Ton und deiner Deckkraft, backdrop-filter: blur() saturate() in Standard- und -webkit--Form, ein 1-px-Rahmen im Ton mit deiner Rahmendeckkraft, dein Eckenradius und ein fester weicher Schlagschatten.
Funktioniert Glassmorphism in jedem Browser?
Unterstützung und Darstellung von backdrop-filter hängen von Browser und Version ab. Der Export enthält Standard- und -webkit-Deklarationen, aber keine Laufzeiterkennung. Ohne Filter bleiben transparenter Hintergrund, Rahmen und Schatten; prüfe den Textkontrast vor dem echten Hintergrund.
Warum braucht die Vorschau diese farbigen Kugeln?
backdrop-filter verarbeitet, was hinter dem Element liegt — Glas über einem leeren Hintergrund zeigt also nichts. Die Kugeln geben Blur und Sättigung etwas Echtes zum Verarbeiten — aus demselben Grund, aus dem Glaseffekte in der Produktion belebte Hintergründe brauchen.
Was ist in der exportierten Regel fest?
Drei Dinge: Die Rahmenbreite ist immer 1 px, die Rahmenfarbe immer dein Ton mit der gewählten Rahmendeckkraft, und der Schlagschatten ist eine feste weiche Ausdehnung. Alles andere — Hintergrund, Blur, Sättigung, Radius — folgt direkt deinen Reglern.
Wie deckend sollte das Glas sein?
Bleib in der unteren Hälfte des Bereichs für Panels, die über Inhalt schweben — der Standard 0,22 hält Hintergründe durch das Material lesbar. Geh nur höher, wenn das Panel Text trägt, der einen belebten Hintergrund überstehen muss, und prüfe den Kontrast bei deinen echten Schriftgrößen.
Werden meine Einstellungen hochgeladen?
Nein. Das Panel wird vollständig in diesem Tab ohne Konto berechnet und angezeigt, und nichts wird gespeichert, protokolliert oder gesendet. Drücke Zurücksetzen, um das Standardmaterial wiederherzustellen.

Weiter in Design

Verwandte Aufgaben statt Sackgasse.

Wechsle in einen anderen fokussierten Arbeitsbereich, ohne zum vollständigen Index zurückzukehren.

Generator für CSS-Ladeanimationen

CSS Loader Generator

Gestalte Ladeindikatoren als Ring oder Punkte mit 24 bis 160 px Rahmen und 0,2 bis 4 Sekunden Zyklus — mit Live-Vorschau und Code zum Kopieren.

Erstellen

CSS-Checkbox-Generator

CSS Checkbox Generator

Style eigene Checkboxen auf Basis eines nativen input-Elements — mit Fokus-Umriss, Disabled-Zustand und Reduced-Motion-Variante im kopierfertigen CSS.

Erstellen

CSS-Switch-Generator

CSS Switch Generator

Entwirf Umschalter aus reinem CSS mit frei bemessener Schiene und Regler, 180-ms-Transition und Reduced-Motion-Fallback — Code zum Kopieren.

Erstellen

CSS-clip-path-Generator

CSS Clip Path Generator

Bearbeite Polygonpunkte per Ziehen, Tastatur oder Koordinaten. Vier Vorlagen und lokaler Export als clip-path-Deklaration oder vollständiges CSS.

Erstellen