Zum Inhalt springen
Musterli

Glas- und Rahmen-Effekte

Milchglas, Verlaufsrahmen und Leuchten für Karten und Hero-Bereiche. Echtes CSS mit Vorschau, kopierbar als CSS, Tailwind oder HTML.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem Glas- und Rahmen-Effekte

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

Glas- und Rahmen-Effekte sind CSS-Oberflächen für Karten, Dialoge und Hero-Bereiche: Milchglas mit backdrop-filter, Rahmen mit Farbverlauf (auf Wunsch drehend) und farbiges Leuchten. Das Tool zeigt den Effekt als echtes CSS auf einem Musterli-Hintergrund und liefert den Code dazu.

So geht’s

Wähle Glas, Verlaufsrahmen oder Leuchten. Beim Glas stellst du Unschärfe, Tönung, Sättigung, Innenrand und Körnung ein, beim Rahmen Farben, Breite und Drehung, beim Leuchten Farbe, Reichweite und Stärke. Unter Bühne wechselst du den Hintergrund. Mit der Leertaste entstehen neue Varianten. Kopiere CSS, Tailwind-Klassen oder ein HTML-Beispiel.

Glas- und Rahmen-Effekte jetzt ausprobieren

Häufige Fragen

Funktioniert der Glas-Effekt in Safari?
Ja. Der Code enthält backdrop-filter zusätzlich mit dem Präfix -webkit-, das Safari vor Version 18 braucht. Chrome, Edge und Firefox unterstützen backdrop-filter ohne Präfix.
Warum gibt es Glas nicht als PNG?
Glas zeigt verschwommen, was auf deiner Seite dahinter liegt. Ein Bild würde nur den Hintergrund hier im Tool festhalten. Verlaufsrahmen und Leuchten kannst du dagegen als PNG oder WebP exportieren.
Was passiert mit dem drehenden Rahmen bei reduzierter Bewegung?
Wer in den Systemeinstellungen weniger Bewegung wünscht, sieht einen stillstehenden Rahmen. Der Code enthält dafür eine Regel für prefers-reduced-motion. Browser ohne @property zeigen ebenfalls den statischen Rahmen.
Ist Text auf Glas gut lesbar?
Das hängt von Tönung und Hintergrund ab. Das Tool prüft den Kontrast deiner Textfarbe auf dem getönten Glas und zeigt einen Hinweis, wenn WCAG AA mit 4.5:1 verfehlt wird.

Passende Generatoren

Alle Generatoren in CSS-Effekte und Layouts