Was sind CSS-Filter?

CSS-Filter ermöglichen es Ihnen, grafische Effekte wie Unschärfe oder Farbverschiebung auf ein Element anzuwenden. Sie werden häufig für Bilder, Hintergründe und Rahmen verwendet.

Filter können verwendet werden, um visuelle Effekte zu erstellen, Bilder zu verbessern oder einzigartige Designelemente zu erstellen, ohne dass externe Bildbearbeitungswerkzeuge erforderlich sind.

Unterstütztes CSS Filtereigenschaften

• blur()- Wendet eine Gaußsche Unschärfe auf das Element an.
• brightness()- Passt die Helligkeit des Elements an.
• contrast()- Passt den Kontrast des Elements an.
• grayscale()- Konvertiert das Element in Graustufen.
• hue-rotate()- Wendet eine Farbtondrehung auf das Element an.
• invert()- Kehrt die Farben des Elements um.
• opacity()- Passt die Deckkraft des Elements an.
• saturate()- Sättigt das Element oder entsättigt es.
• sepia()- Konvertiert das Element in Sepia.

So wenden Sie Filter

an Mit dem von diesem Tool generierten CSS-Code können Sie Filter auf jedes HTML-Element anwenden. So geht's:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Browserkompatibilität

CSS-Filter werden in modernen Browsern wie Chrome, Firefox, Safari, Edge und Opera weitgehend unterstützt. Ältere Browser wie Internet Explorer unterstützen sie jedoch nicht.