Glassmorphismus-Generator

Generiere CSS-Glassmorphismus-Effekte mit Unschärfe- und Transparenzsteuerung. Live-Vorschau und kopierfertiges CSS für Milchglas-UI-Designs.

Glassmorphism Generator

Design beautiful frosty glass CSS effects.

10px
0.2
CSS Code

So verwendest du den Glassmorphismus-Generator

  1. Passe den Unschärfe-Regler an, um die Intensität der Hintergrundunschärfe zu steuern.
  2. Stelle das Transparenzniveau für die Glasüberlagerung ein.
  3. Sieh dir die Live-Vorschau in Echtzeit an.
  4. Kopiere das generierte CSS und füge es in dein Projekt ein.

Über Glassmorphismus

Glassmorphismus ist ein moderner UI-Designtrend, der unscharfe, durchscheinende Panels verwendet, um Tiefe zu erzeugen. Er wurde mit macOS Big Sur und iOS populär und wird heute weitläufig in Webanwendungen eingesetzt.

Der Effekt verwendet backdrop-filter: blur() kombiniert mit halbtransparenten Hintergründen und subtilen Rändern. Dieser Generator produziert das notwendige CSS mit Herstellerpräfixen für browserübergreifende Unterstützung.

Häufig gestellte Fragen

Welche Browser unterstützen Glassmorphismus?

Glassmorphismus funktioniert in Chrome, Edge, Safari und Firefox. Die backdrop-filter-Eigenschaft wird von modernen Browsern weitgehend unterstützt.

Funktioniert es auf dunklen Hintergründen?

Ja. Glassmorphismus sieht am besten auf farbigen oder verlaufenden Hintergründen aus, wo die Unschärfe und Transparenz einen deutlichen Milchglaseffekt erzeugen.

Kann ich den Rand anpassen?

Das generierte CSS enthält eine anpassbare Rand-Eigenschaft. Du kannst Farbe und Deckkraft an dein Design anpassen.

Gefällt dir SlimUtils? Wenn diese kostenlosen Tools dir Zeit gespart haben, kauf uns einen Kaffee! Auf Ko-fi unterstützen