Wat zijn CSS-filters?

Met CSS-filters kunt u grafische effecten zoals vervaging of kleurverschuiving toepassen op een element. Ze worden vaak gebruikt voor afbeeldingen, achtergronden en randen.

Filters kunnen worden gebruikt om visuele effecten te creëren, afbeeldingen te verbeteren of unieke ontwerpelementen te creëren zonder dat er externe tools voor het bewerken van afbeeldingen nodig zijn.

Ondersteunde CSS-filtereigenschappen

• blur()- Past een Gaussiaanse vervaging toe op het element.
• brightness()- Past de helderheid van het element aan.
• contrast()- Hiermee past u het contrast van het element aan.
• grayscale()- Converteert het element naar grijstinten.
• hue-rotate()- Hiermee past u een kleurtoonrotatie toe op het element.
• invert()- Keert de kleuren van het element om.
• opacity()- Hiermee past u de dekking van het element aan.
• saturate()- Verzadigt of ontzadigt het element.
• sepia()- Zet het element om in sepia.

Filters toepassen

Met behulp van de CSS-code die door deze tool wordt gegenereerd, kunt u filters toepassen op elk HTML-element. Dit doe je als volgt:

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

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

Browsercompatibiliteit

CSS-filters worden breed ondersteund in moderne browsers, waaronder Chrome, Firefox, Safari, Edge en Opera. Oudere browsers zoals Internet Explorer ondersteunen ze echter niet.