Toolser

Glassmorphism-Generator

Gestalte eine transparente Glasfläche und kopiere CSS oder Tailwind-Klassen.

Glasfläche

Passe die Regler für eine ruhige, lesbare Ebene an.

CSS-Block

.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(15, 23, 42, 0.125);
}

Tailwind-Klassen

bg-white/65 backdrop-blur-[16px] backdrop-saturate-[140%] border border-white/35 rounded-[20px] shadow-[0_15px_50px_rgba(15,23,42,0.125)]
Ad Space Placeholder

So funktioniert es

  1. Passe die sechs Regler an.
  2. Vergleiche die Fläche über verschiedenen Verläufen.
  3. Kopiere CSS oder Tailwind-Klassen.

Über dieses Werkzeug

Glassmorphismus ist ein geschichteter UI-Stil aus Transparenz, Unschärfe, Sättigung, hellen Rändern, runden Ecken und einem weichen Schatten. Entscheidend ist das Zusammenspiel von Oberfläche und Hintergrund, nicht ein einzelner magischer rgba-Wert. Dieser Generator zeigt die wichtigsten Regler und stellt die Karte über mehrere farbige Verläufe. Unschärfe trennt Inhalte von unruhigem Bildmaterial, Transparenz lässt den Hintergrund durchscheinen, Sättigung erhält oder verstärkt Farben, Randdeckkraft definiert die Kante, Radius die Silhouette und Schatten die Tiefe. Der erzeugte CSS-Block enthält backdrop-filter sowie die WebKit-Variante für eine breitere Browserabdeckung. Der Tailwind-String ist ein praktischer Ausgangspunkt; prüfe beliebige Werte und Opazitätssyntax jedoch gegen deine verwendete Tailwind-Version. Glasflächen müssen in hellen und dunklen Situationen auf Kontrast geprüft werden, und Text muss bei wechselndem Hintergrund lesbar bleiben. Da Backdrop-Filter progressive Verbesserung sind, sollte ein passender transparenter Fallback existieren. Viele stark transparente Ebenen übereinander erzeugen schnell Unruhe und teures Compositing. Kopiere den Code und passe anschließend Abstände, Farben, Fokuszustände und Verhalten bei reduzierter Bewegung in deiner Komponente an. Einstellungen werden nicht gespeichert und bleiben im Browser. Teste abschließend Tastaturfokus und Kontrast in der echten Seite, da ein schöner Verlauf allein keine zugängliche Oberfläche garantiert. Für ältere Browser kannst du eine halbtransparente Hintergrundfarbe ohne Filter als Fallback definieren. Prüfe außerdem, ob die gewählte Sättigung Bilder und kleine Schrift nicht unruhig wirken lässt.

Häufige Fragen

Ähnliche Werkzeuge

Seitenverhältnis-Rechner

Passende Bild- und Videodimensionen für 16:9, 4:3, Quadrat, Hochformat, Kino und eigene Verhältnisse berechnen.

Open-Graph-Previewer

Twitter-, Discord-, Telegram- und LinkedIn-Karten prüfen und ein Open-Graph-Meta-Tag-Snippet erzeugen.

Platzhalter-Generator

Erstelle SVG-Platzhalter und Data-URIs mit eigenen Maßen, Farben, Beschriftungen und Schriftgrößen.