Dans cet article
La propriété CSS filter expliquée
La propriété CSS filter applique des effets graphiques comme le flou, la luminosité, le contraste et les décalages de couleur à tout élément HTML. Elle fonctionne sur les images, les arrière-plans, le texte et même des sections entières. Les filtres sont traités par le GPU du navigateur, les rendant efficaces pour les effets visuels en temps réel.
CSS fournit neuf fonctions de filtre intégrées : blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate et sepia. Elles peuvent être enchaînées dans une seule déclaration filter pour créer des effets visuels complexes. L'ordre des filtres compte — chaque fonction traite la sortie de la précédente.
Comment chaque fonction de filtre fonctionne
Chaque fonction de filtre prend une seule valeur et transforme la sortie visuelle de l'élément. Comprendre ce que fait chaque fonction vous aide à les combiner efficacement.
- blur(px) — applique un flou gaussien, rendant l'élément flou. Des valeurs plus élevées créent un flou plus fort. Utile pour les superpositions et les effets de verre dépoli
- brightness(%) et contrast(%) — brightness ajuste la luminosité globale (100% inchangé, 200% double), tandis que contrast ajuste la différence entre les zones claires et sombres
- grayscale(%), sepia(%) et hue-rotate(deg) — grayscale supprime la saturation des couleurs, sepia ajoute une tonalité brune chaude, et hue-rotate décale toutes les couleurs sur le cercle chromatique
Essayez gratuitement — sans inscription
Générer des filtres CSS →Créer des effets style Instagram
En empilant plusieurs fonctions de filtre CSS, vous pouvez recréer des effets de filtres photo populaires entièrement en code. Ces effets s'appliquent en temps réel sur tout élément image.
- Look vintage — combinez sepia(60%) avec contrast(110%) et brightness(90%) pour créer un effet de photographie chaude et délavée rappelant les anciens appareils à pellicule
- Noir et blanc — utilisez grayscale(100%) avec contrast(120%) pour un effet monochrome à fort contraste. Ajoutez brightness(110%) pour un noir et blanc plus lumineux
- Ambiance dramatique — empilez contrast(150%) avec saturate(130%) et brightness(80%) pour une atmosphère vivante et assombrie où les couleurs ressortent sur des ombres profondes
Questions fréquemment posées
Peut-on utiliser des filtres SVG avec la propriété CSS filter ?
Oui. La fonction url() dans CSS filter permet de référencer des définitions de filtres SVG personnalisés pour des effets au-delà des fonctions intégrées. Cela permet des effets avancés comme les cartes de déplacement et les matrices de couleur.
Les filtres CSS affectent-ils les performances ?
Les filtres CSS sont accélérés par le GPU dans les navigateurs modernes, les rendant efficaces pour la plupart des cas. Les filtres simples sur les images ont un impact minimal. Cependant, appliquer un flou sur de grandes zones ou animer plusieurs filtres simultanément peut causer des saccades sur les appareils moins puissants.
Les filtres peuvent-ils être animés au survol ?
Oui. Les filtres CSS fonctionnent parfaitement avec les transitions et animations. Un modèle courant est d'appliquer un filtre grayscale ou blur par défaut et de faire la transition vers l'aspect original au survol, créant des effets fluides accélérés par le GPU.