Diese Seite nutzt datenschutzfreundliche Analyse-Daten aus erster Hand, um zu sehen, welche Seiten und Tools nützlich sind. Keine Daten werden an Werbetreibende oder Tracking-Dienste Dritter weitergegeben. Mehr erfahren

Tools · CSS · Glassmorphism-Effekt erstellen

Glassmorphism-Effekt erstellen

Erstelle eine Milchglas-Karte mit Hintergrundunschärfe, Transparenz und weichem Rand, und kopiere das CSS.

Datei hier ablegen oder auswählen.

Läuft komplett im Browser. Es wird nichts hochgeladen.

So funktioniert es

  1. Unschärfe, Farbton, Hintergrund-Deckkraft und Sättigung anpassen.

  2. Rand-Deckkraft und Eckenradius für mehr Tiefe feinabstimmen.

  3. Das fertige CSS kopieren, einschließlich der backdrop-filter-Eigenschaft.

Häufige Fragen

Der Effekt basiert auf backdrop-filter, das manche älteren Browser nicht unterstützen. Fehlt es, zeigt die Vorschau den Farbton ohne Unschärfe, aber das kopierte CSS ist davon nicht betroffen und bleibt korrekt.

Beides. backdrop-filter weichzeichnet alles, was hinter dem Element liegt: ein Bild, einen Verlauf, oder eine andere Farbe.

Das generierte CSS enthält das Präfix -webkit-backdrop-filter zusätzlich zur Standard-Eigenschaft.

Nein. Alles läuft in deinem Browser.

Ähnliche Tools

CSS-Verlauf erstellen

Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.

 CSS-Schatten erstellen

Erstelle einen mehrschichtigen CSS-Schatten (box-shadow) mit Live-Vorschau, und kopiere den Code.

 CSS-Ecken abrunden

Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.

 Cubic-Bezier-Easing-Generator

Ziehe eine Kurve, um einen cubic-bezier()-Easing-Wert zu erstellen, sieh sie mit einem echten CSS-Übergang live abspielen, und kopiere den Code.

 Clip-Path-Generator

Erstelle eine CSS-clip-path-Form - Polygon, Kreis, Ellipse oder Inset - mit Live-Vorschau, und kopiere den Code.

 CSS-Minifizierer & -Formatierer

Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.

 Flexbox-Spielwiese

Erstelle ein CSS-Flexbox-Layout - Richtung, Umbruch, Ausrichtung, Abstand sowie Wachstum, Schrumpfung und Basis je Element - mit Live-Vorschau, und kopiere den Code.

 Grid-Spielwiese

Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.

Kommentare

  1. Noch keine Kommentare. Teile deine Erfahrung als Erstes.
Deine Bewertung (optional)

Keine Bewertung ausgewählt