CSS filter: Blur, Helligkeit, Kontrast und mehr
Meistere die CSS filter Eigenschaft — blur, brightness, contrast, grayscale, hue-rotate und drop-shadow.
Die CSS filter-Eigenschaft wendet grafische Effekte auf Elemente an. Im Gegensatz zur Bildbearbeitung in Photoshop sind CSS-Filter Echtzeit und nicht destruktiv.
Filter werden als Liste von Funktionen angewendet. Die Reihenfolge ist wichtig: jeder Filter wird auf das Ergebnis des vorherigen angewendet.
Was ist CSS filter
Die CSS filter-Eigenschaft akzeptiert eine leerzeichengetrennte Liste von Filterfunktionen. Filter gelten für das Element und alle seine Inhalte einschließlich Kinder.
Kostenloses Tool CSS-Filter-Generator Erstelle CSS-Filtereffekte mit Live-Vorschaublur() und brightness()
blur(Radius) wendet einen Gaußschen Weichzeichner an. brightness(Menge) passt die Helligkeit an: brightness(1) unverändert, brightness(0) ist schwarz.
contrast(), grayscale(), sepia()
contrast(Menge) passt den Kontrast an. grayscale(Menge) entfernt Farbe: grayscale(1) ist vollständig grauskalig. sepia(Menge) wendet einen warmen Braunton an.
Kostenloses Tool Farbenblindheit-Simulator Sieh, wie deine Designs für Nutzer mit Farbsehschwächen aussehenhue-rotate() und saturate()
hue-rotate(Winkel) dreht den Farbton aller Farben. saturate(Menge) passt die Farbintensität an: saturate(0) ist Graustufen, saturate(2) ist stark gesättigt.
drop-shadow() vs box-shadow
drop-shadow() erzeugt einen Schatten, der der Form des Elements folgt, einschließlich transparenter Bereiche in Bildern. box-shadow folgt nur dem rechteckigen Rahmen des Elements.
Mehrere Filter kombinieren
Mehrere Filter werden von links nach rechts angewendet. filter: brightness(1.2) contrast(1.1) saturate(1.3) erzeugt ein lebendiges Bild.
Kostenloses Tool Glasmorphismus-Generator Erstelle Milchglas-UI-Effekte mit backdrop-filter und Unschärfe