CSS-Glassmorphism-Generator

Was ist CSS-Glassmorphism-Generator?

Der CSS-Glassmorphism-Generator ist ein kostenloser visueller Editor für den Milchglas-UI-Stil (Glassmorphism), gemacht für Frontend-Entwickler und Produktdesigner. Passe Unschärfegrad, Oberflächentransparenz, Farbsättigung, Rahmenstärke, Eckenradius und Schattenstärke mit Zahleneingaben und Schiebereglern an und wähle dann mit dem Farbfeld eine Tönungsfarbe. Ein Vorschaubereich zeigt das Glaspanel in Echtzeit über einem lebendigen Verlaufshintergrund, und das vollständige CSS — mit backdrop-filter, einem halbtransparenten Hintergrund, einem dezenten Rahmen und einem box-shadow — wird zum Kopieren erzeugt. Nutze ihn, um glasige Karten, Navigationsleisten, Modals und Overlays zu bauen, ohne den rgba-Alphawert von Hand abzustimmen oder dir das Präfix -webkit-backdrop-filter zu merken.

So verwendest du CSS-Glassmorphism-Generator

1. Stelle die Unschärfe (in px) ein, um zu steuern, wie stark der Bereich hinter dem Panel mattiert wird.
2. Senke die Transparenz, damit das Glas durchsichtiger wird, oder erhöhe sie für eine festere Oberfläche.
3. Hebe die Sättigung über 100 % an, damit die Hintergrundfarben durch das Glas hindurch leuchten.
4. Wähle mit dem Farbfeld eine Tönungsfarbe und passe Rahmenbreite, Radius und Schatten an, um den Look abzurunden.
5. Beobachte, wie sich die Vorschau über dem Hintergrund in Echtzeit aktualisiert, während du jeden Wert änderst.
6. Kopiere das erzeugte CSS in dein Stylesheet — es enthält bereits das -webkit-backdrop-filter-Fallback.

Beispiele

Unschärfe 12, Transparenz 25%, Sättigung 120%, Radius 16, Rahmen 1, Schatten 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

Unschärfe 8, Transparenz 60%, Sättigung 100%, Radius 0, Rahmen 1, Schatten 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

Tönung #0f172a, Unschärfe 20, Transparenz 30%, Sättigung 140%, Radius 24, Schatten 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Häufig gestellte Fragen

Was macht backdrop-filter?

backdrop-filter wendet grafische Effekte — hier Unschärfe und Sättigung — auf alles an, was hinter dem Element liegt, und genau das erzeugt den Milchglas-Look. Der Generator gibt sowohl backdrop-filter als auch das Präfix -webkit-backdrop-filter aus, damit es browserübergreifend funktioniert, dazu einen halbtransparenten Hintergrund, einen Rahmen und einen Schatten.

Warum gibt es einen Transparenzregler?

Der Glaseffekt braucht einen teilweise durchsichtigen Hintergrund, damit der unscharfe Hintergrund durchscheint. Der Transparenzregler legt den Alphawert der Hintergrundfarbe des Panels (rgba) fest: niedrigere Werte sind transparenter, höhere Werte undurchsichtiger und fester.

Kann ich farbiges oder dunkles Glas verwenden?

Ja. Wähle mit dem Farbfeld eine beliebige Tönungsfarbe — das Tool mischt sie in den rgba-Hintergrund ein, sodass du warmes, kühles oder dunkles Glas erzeugen kannst. Kombiniere eine dunkle Tönung mit höherer Transparenz für stimmungsvolle Overlays oder belasse es bei Weiß für ein klassisches Milchglaspanel.

Funktioniert es in jedem Browser?

Die meisten modernen Browser unterstützen backdrop-filter. Das erzeugte CSS enthält das Präfix -webkit-backdrop-filter für Safari und älteres Chromium, aber sehr alte Browser ignorieren es und zeigen einfach den halbtransparenten Hintergrund ohne die Unschärfe.

Werden meine Daten irgendwohin hochgeladen?

Nein. Der Generator läuft vollständig in deinem Browser mit JavaScript — deine Farben und Werte werden nie an einen Server gesendet, sodass er privat und nach dem Laden der Seite sogar offline funktioniert.