CSS-Verlauf-Generator
Lineare, radiale und konische Verläufe bauen und CSS kopieren.
Design
CSS-Filter- und Glas-Generator
Weichzeichnung, Glas, Duotone und Filter mit Vorschau und CSS.
Was es macht. CSS-Filter verändern die Darstellung eines Elements — Weichzeichnung, Helligkeit, Sättigung, Farbdrehung und weitere. Der verwandte backdrop-filter wirkt nicht auf das Element, sondern auf das, was dahinter liegt, und ist damit die Grundlage für Milchglas-Oberflächen.
Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline
So benutzt du CSS-Filter- und Glas-Generator
- Wähl die Filter und stell ihre Werte ein — die Vorschau folgt sofort.
- Wechsel zwischen filter und backdrop-filter, um Element oder Hintergrund zu beeinflussen.
- Kopier das fertige CSS.
filter und backdrop-filter
Der Unterschied wird ständig verwechselt und ist der Grund, warum Glaseffekte oft nicht funktionieren.
filter wirkt auf das Element selbst, samt Inhalt. Ein weichgezeichnetes Element hat auch weichgezeichneten Text.
backdrop-filter wirkt auf alles, was hinter dem Element liegt. Der Inhalt bleibt scharf, der Hintergrund wird weichgezeichnet — das ist der Milchglas-Effekt.
Damit er sichtbar wird, muss das Element teiltransparent sein. Ein Element mit deckendem Hintergrund verdeckt seinen Hintergrund vollständig; es gibt dann nichts zu sehen. Üblich sind 60 bis 80 Prozent Deckkraft plus 8 bis 16 Pixel Weichzeichnung.
Ein Hinweis zur Lesbarkeit: Milchglas kann Kontraste unvorhersehbar machen, weil der Hintergrund wechselt. Wo Text darauf liegt, braucht es eine ausreichend deckende Grundfläche — sonst ist die Kontrastanforderung mal erfüllt und mal nicht.
Was die einzelnen Filter tun
Mehrere lassen sich hintereinander schalten; die Reihenfolge wirkt sich auf das Ergebnis aus.
| Filter | Wirkung | Typischer Wert |
|---|---|---|
| blur() | Weichzeichnen | 4px bis 20px |
| brightness() | Heller oder dunkler | 0.8 bis 1.2 |
| contrast() | Kontrast | 0.9 bis 1.5 |
| saturate() | Sättigung | 0 bis 2 |
| grayscale() | Entsättigen | 0 bis 1 |
| hue-rotate() | Farbton drehen | 0deg bis 360deg |
| invert() | Umkehren | 0 bis 1 |
| drop-shadow() | Schatten entlang der Form | wie box-shadow |
drop-shadow unterscheidet sich von box-shadow darin, dass es der tatsächlichen Form folgt statt dem Rechteck. Bei einem PNG mit transparentem Hintergrund oder einem SVG ist es die einzige Möglichkeit, einen Schatten entlang der Silhouette zu erzeugen.
Wann Filter zum Problem werden
Filter sind rechenintensiv, und Weichzeichnung ist der teuerste davon.
Ein backdrop-filter zwingt den Browser, den Bereich hinter dem Element auszulesen, zu verarbeiten und neu zusammenzusetzen — bei jedem Bild, wenn sich darunter etwas bewegt. Auf einem älteren Telefon ist eine milchglasartige, mitscrollende Kopfzeile eine der zuverlässigsten Ursachen für ruckelndes Scrollen.
Drei Regeln halten das im Griff: keine Weichzeichnung über große Flächen, keine animierten Filterwerte, und ein will-change nur dort, wo tatsächlich animiert wird.
Prüf den Effekt außerdem mit reduzierter Transparenz: Manche Systeme deaktivieren Transparenzeffekte auf Wunsch der Nutzenden. Eine Oberfläche, deren Lesbarkeit vom Milchglas abhängt, wird dann schwer benutzbar.
Häufige Fragen
Was ist der Unterschied zwischen filter und backdrop-filter?
filter wirkt auf das Element samt Inhalt, backdrop-filter auf das, was dahinter liegt. Für Milchglas brauchst du das zweite.
Warum sehe ich meinen Glaseffekt nicht?
Weil das Element deckend ist. Es braucht Teiltransparenz, sonst gibt es keinen sichtbaren Hintergrund.
Wann nehme ich drop-shadow statt box-shadow?
Bei PNG mit Transparenz und bei SVG. drop-shadow folgt der Form, box-shadow dem Rechteck.
Kosten Filter Leistung?
Ja, besonders Weichzeichnung über große Flächen und animierte Werte. Auf älteren Telefonen deutlich spürbar.
Spielt die Reihenfolge der Filter eine Rolle?
Ja. Sie werden nacheinander angewendet, und ein anderer Ablauf ergibt ein anderes Bild.
Wird etwas hochgeladen?
Nein, die Vorschau läuft in diesem Tab.