ZenovayTools

Glassmorphism-Generator

Generieren Sie CSS-Glassmorphism-Effekte mit Live-Vorschau. Passen Sie Unschärfe, Transparenz, Rahmen und Farbe an. Kopieren Sie sofort einsatzbereiten CSS-Code.

Glass Properties

Blur12px
Transparency25%
Saturation120%
Border Opacity30%
Border Radius16px
Glass Color
#ffffff

Preview Background

Glass Card

Glassmorphism effect

This is a preview of your glassmorphism CSS. Adjust the sliders to customize the blur, transparency, and other properties.

Action
Cancel
CSS Code
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

Browser support: backdrop-filter is supported in 96%+ of browsers. Add the -webkit- prefix for Safari. Use @supports for fallback styling.

So verwenden Sie Glassmorphism-Generator

  1. 1Passen Sie die Schieberegler für Unschärfe, Transparenz und Farbe an.
  2. 2Sehen Sie den Glassmorphism-Effekt in Echtzeit aktualisieren.
  3. 3Passen Sie Rahmen, Rahmenradius und Hintergrund an.
  4. 4Kopieren Sie den generierten CSS-Code für Ihr Projekt.
ZenovayAnalytics

Machen Sie aus Besuchern Kunden.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.
CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.
CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.
CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.

Häufig gestellte Fragen

Was ist Glassmorphism?▾
Glassmorphism ist ein UI-Design-Trend, der einen Frosted-Glass-Effekt mit CSS backdrop-filter erzeugt. Hauptmerkmale: semi-transparenter Hintergrund, Unschärfe, subtiler Rahmen und weiches Schatten. Popularisiert durch Apple und Microsoft.
Wie funktioniert backdrop-filter: blur()?▾
Die CSS-Eigenschaft backdrop-filter wendet grafische Effekte auf den Bereich hinter einem Element an. blur() erzeugt eine Gaußsche Unschärfe auf dem Inhalt, der durch das semi-transparente Element sichtbar ist. Typische Werte: 4-20px.
Welche Browser unterstützen Glassmorphism?▾
backdrop-filter wird in Chrome 76+, Safari 9+, Firefox 103+, Edge 79+ unterstützt. Die globale Unterstützung liegt bei etwa 96%. Verwenden Sie das -webkit--Präfix für Safari und @supports für Fallback-Styling.
Wie mache ich Glassmorphism barrierfrei?▾
Stellen Sie sicher, dass Text einen ausreichenden Kontrast hat (WCAG 4,5:1 für normalen Text). Verwenden Sie bei Bedarf eine höhere Hintergrund-Deckkraft. Fügen Sie einen Rahmen hinzu, um Grenzen zu definieren. Erwägen Sie die Medienabfrage prefers-reduced-transparency.
Beeinflusst Glassmorphism die Leistung?▾
backdrop-filter löst GPU-Compositing aus. Begrenzen Sie den Unschärferadius, vermeiden Sie es, Unschärfewerte zu animieren, minimieren Sie überlappende Glass-Elemente. Ein paar Glass-Karten sind in Ordnung; Overlays auf der gesamten Seite können zu Frame-Drops führen.
Kann ich Glassmorphism-Effekte animieren?▾
Ja, aber animieren Sie Deckkraft und Transformation statt des Unschärfewerts selbst. CSS-Übergänge funktionieren gut für Hover-Zustände auf Glaskarten.