Que sont les filtres CSS ?

Les filtres CSS vous permettent d’appliquer des effets graphiques tels que le flou ou le changement de couleur à un élément. Ils sont couramment utilisés pour les images, les arrière-plans et les bordures.

Les filtres peuvent être utilisés pour créer des effets visuels, améliorer des images ou créer des éléments de conception uniques sans avoir besoin d’outils de retouche d’images externes.

de filtre CSS prises en charge

• blur(): applique un flou gaussien à l’élément.
• brightness()- Ajuste la luminosité de l’élément.
• contrast()- Ajuste le contraste de l’élément.
• grayscale()- Convertit l’élément en niveaux de gris.
• hue-rotate()- Applique une rotation de teinte à l’élément.
• invert()- Inverse les couleurs de l’élément.
• opacity()- Ajuste l’opacité de l’élément.
• saturate()- Sature ou désature l’élément.
• sepia()- Convertit l’élément en sépia.

Comment appliquer des filtres

À l’aide du code CSS généré par cet outil, vous pouvez appliquer des filtres à n’importe quel élément HTML. Voici comment :

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

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

Les

filtres CSS sont largement pris en charge dans les navigateurs modernes, notamment Chrome, Firefox, Safari, Edge et Opera. Cependant, les navigateurs plus anciens comme Internet Explorer ne les prennent pas en charge.