Générateur CSS de filtres, gratuit

Comment utiliser

1. Ajustez les curseurs de filtre : utilisez les curseurs pour contrôler flou, luminosité, contraste, saturation, rotation de teinte, opacité, niveaux de gris, sépia et inversion.
2. Prévisualisez en temps réel : l'image ou l'élément d'exemple se met à jour instantanément quand vous déplacez un curseur.
3. Copiez le CSS : la valeur complète de la propriété filter (par ex. filter: brightness(1.2) contrast(1.5) saturate(0.8)) est prête à coller dans votre feuille de style.

Pourquoi utiliser le générateur CSS de filtres ?

Les filtres CSS permettent d'appliquer des effets de traitement d'image (flou, contraste, luminosité, décalages de couleurs) directement dans le navigateur sans Photoshop ni logiciel d'édition d'image. Ils fonctionnent sur les images, les vidéos et tout élément HTML. Construire la chaîne de la propriété filter à la main exige de connaître les noms de fonctions exacts et les plages de valeurs valides. Ce générateur propose des curseurs intuitifs avec un retour visuel pour obtenir exactement le rendu souhaité.

Fonctionnalités

• Toutes les fonctions CSS filter : blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert et drop-shadow.
• Aperçu en direct : voyez les changements sur une image d'exemple ou la vôtre en temps réel.
• Validation des valeurs : les curseurs imposent les plages valides pour chaque fonction filter.
• Réinitialisation individuelle : remettez un seul filtre à sa valeur par défaut sans toucher aux autres.
• Sortie combinée : tous les filtres sélectionnés sont combinés en une seule chaîne filter.

Questions fréquentes

Peut-on appliquer les filtres CSS à des vidéos ?

Oui. La propriété filter CSS fonctionne sur tout élément, y compris <video>, <img>, <div> et <canvas>. Appliqué à une vidéo, le filtre est rendu en temps réel pendant la lecture.

Quelle est la différence entre filter et backdrop-filter ?

filter applique l'effet à l'élément lui-même et à tous ses enfants. backdrop-filter applique l'effet au contenu situé derrière (sous) l'élément, couramment utilisé pour des effets de verre dépoli.

Les filtres CSS affectent-ils les performances ?

Les filtres avec flou ou compositing complexe peuvent être gourmands pour le GPU. Pour des filtres animés, assurez-vous que l'élément est sur sa propre couche de composition (ajoutez transform: translateZ(0) comme indication). Les filtres statiques sur images et icônes ont un impact minimal.

Ce que CSS filter fait vraiment

La propriété CSS filter applique des effets graphiques (flou, ajustement de contraste, décalage de couleur, ombre portée) à un élément et à ses enfants avant que le navigateur ne le peigne à l’écran. Le traitement se fait entièrement dans le pipeline de rendu du navigateur, généralement accéléré par le GPU, sans aucun JavaScript impliqué. Les effets sont uniquement visuels : le HTML sous-jacent, le fichier qu’une image référence et la mise en page restent tous inchangés. Une photographie affichée avec filter: grayscale(1) conserve ses couleurs originales dans le fichier ; le navigateur convertit en niveaux de gris uniquement à l’affichage.

CSS filter expose dix fonctions : blur(px) pour le flou gaussien, brightness(n) et contrast(n) pour les ajustements tonals, saturate(n) pour l’intensité des couleurs, hue-rotate(deg) pour décaler la roue chromatique, opacity(n) pour la transparence, grayscale(n) et sepia(n) pour les effets de désaturation, invert(n) pour la sortie négative, et drop-shadow(...) pour les ombres conscientes de la forme (contrairement à box-shadow, drop-shadow suit la forme réellement rendue y compris la transparence, idéal pour les ombres sur les icônes ou les images PNG avec des bords découpés). Les fonctions s’enchaînent : filter: brightness(1.2) contrast(1.3) saturate(0.9) applique les trois en séquence.

Pourquoi cela compte pour le design web moderne : il y a une décennie, ajuster la luminosité, la teinte ou la saturation des images pour la cohérence du design nécessitait de prétraiter chaque image dans Photoshop et de la réexporter. CSS filter apporte les mêmes ajustements à l’exécution, appliqués de manière non destructive. Vous pouvez servir une seule image et la présenter de manières différentes selon le thème, l’état de survol ou la préférence de l’utilisateur. Vous pouvez aussi utiliser les filtres pour l’accessibilité : une photo en niveaux de gris inversés comme espace réservé, ou une superposition d’image assombrie pour une lisibilité de texte à fort contraste. Le compromis est la performance pour certains filtres (le flou surtout) et le fait que les filtres affectent aussi les enfants, ce qui peut cascader de manière inattendue.

Comment cet outil fonctionne en coulisses

Chaque curseur dans l’outil est lié à une seule fonction de filtre. Quand vous déplacez un curseur, JavaScript lit la valeur, construit la chaîne de fonction de filtre avec cette valeur (par ex. brightness(1.4)) et concatène toutes les fonctions actives en une seule chaîne filter CSS. Cette chaîne est appliquée comme un style inline sur l’image d’aperçu, produisant un retour visuel immédiat lorsque le navigateur repeint avec le nouveau filtre. Aucune donnée d’image n’est traitée en JavaScript : les calculs réels au niveau du pixel se font à l’intérieur du moteur de rendu du navigateur, généralement sur le GPU.

Le CSS généré affiché dans la boîte de code est la même chaîne appliquée à l’aperçu. Cliquez sur « Copier CSS » et l’outil écrit cette chaîne dans votre presse-papiers en utilisant l’API moderne navigator.clipboard.writeText(). La chaîne est prête à coller dans l’attribut style de n’importe quel élément ou dans n’importe quelle déclaration de classe dans votre feuille de style. L’outil prend aussi en charge le chargement de votre propre image : choisissez un fichier et il devient une URL blob: temporaire dans le navigateur, jamais téléversée nulle part, et le filtre s’affiche sur votre image réelle pour que vous puissiez régler l’apparence exacte pour votre contenu.

Le comportement de réinitialisation est par filtre : chaque curseur a son propre bouton de réinitialisation qui ramène seulement ce filtre à sa valeur sans effet (1 pour les multiplicateurs, 0deg pour hue-rotate, 0px pour blur). Le bouton « Tout réinitialiser » ramène chaque curseur à neutre simultanément. L’état de l’outil vit en mémoire seulement ; rafraîchissez la page et votre combinaison de filtres est partie. Aucun serveur ne stocke vos valeurs de filtre choisies, aucune analyse ne suit quelles combinaisons vous essayez. L’outil est un terrain de jeu CSS sans état, soutenu par la publicité.

Brève histoire des filtres CSS

• Primitives de filtre SVG, 2001.SVG 1.0 (Recommandation W3C, septembre 2001) définit un système de filtres complet : feGaussianBlur, feColorMatrix, feConvolveMatrix et des dizaines d’autres. Le modèle de filtre SVG est puissant mais verbeux, et appliquer des filtres SVG à des éléments HTML nécessite filter: url(#id) référençant un SVG inline, jamais largement adopté dans les flux de travail HTML-first.
• Module CSS Filter Effects Niveau 1, 2014.Le W3C publie le module Filter Effects Niveau 1 (décembre 2014), introduisant les fonctions de filtre raccourcies simplifiées (blur, brightness, contrast, etc.) qui ne nécessitent pas de SVG inline. Celles-ci correspondent aux besoins les plus courants de traitement d’image dans 95% des cas et sont dramatiquement plus faciles à créer que les filtres SVG.
• Le support des navigateurs atteint une masse critique, 2015.Chrome 53 (2015) et Firefox 35 (2015) livrent le support de filter sans préfixe ; Safari a un support préfixé depuis la version 6 (2012). D’ici 2015, CSS filter est largement utilisable sur les sites de production. Les designers commencent à utiliser les filtres pour les effets de survol, la normalisation d’image et les traitements décoratifs à grande échelle.
• backdrop-filter expédié, 2017 à 2024.Safari 9 (2015) introduit -webkit-backdrop-filter pour les effets de verre dépoli. Chromium expédie backdrop-filter sans préfixe dans Chrome 76 (juillet 2019). Firefox tient bon jusqu’à la version 103 (juillet 2022). La « barre de navigation dépolie » de style iOS devient un modèle d’UI moderne par défaut.
• Le mode sombre pousse l’adoption des filtres, 2019.La tendance design du mode sombre (macOS Mojave 2018 d’Apple, Android 10 2019, iOS 13 2019, navigateur prefers-color-scheme 2019) accélère l’utilisation des filtres pour le CSS « mode sombre auto » invert-and-hue-rotate, où une seule règle filter: invert(1) hue-rotate(180deg) transforme un site mode clair en une vue mode sombre passable sans refonte.
• La complexité du filtre SVG revient via CSS, 2024 et après.Le module CSS Filter Effects Niveau 2 (brouillon) propose de nouvelles fonctions et la capacité de composer des pipelines de filtre personnalisés sans SVG inline, comblant l’écart entre les fonctions raccourcies pratiques et la pleine puissance des primitives de filtre SVG. Le support des navigateurs se déploie encore en 2025.

Flux du monde réel

• Normalisation d’image cohérente avec la marque.Un site qui s’approvisionne en images auprès de nombreux photographes ou fournisseurs de stock obtient une saturation, un contraste et une luminosité incohérents. Appliquer un filtre CSS uniforme à toutes les images (filter: saturate(0.85) contrast(1.05) brightness(0.95)) les ramène toutes dans la même palette de couleurs sans prétraiter chaque fichier. Inversez le filtre pour une image spécifique quand vous voulez qu’elle se démarque.
• États de survol et d’interaction.Les effets de survol utilisant les transitions de filtre semblent soignés et légers. Les images de carte avec filter: grayscale(0.5) au repos et filter: grayscale(0) au survol créent une invitation subtile à interagir. Les vignettes d’image avec filter: brightness(0.9) au repos et brightness(1.1) au survol font de même sans nécessiter deux fichiers d’image.
• UI en verre dépoli avec backdrop-filter.Les superpositions modales, les barres de navigation collantes et les popovers d’infobulle utilisant backdrop-filter: blur(20px) sur un arrière-plan semi-transparent produisent l’effet de verre dépoli de style iOS. C’est maintenant attendu sur les sites marketing modernes ; filter ne s’applique pas parce que nous voulons flouter ce qui est derrière la superposition, pas la superposition elle-même.
• Thématisation dynamique et mode sombre.Mode sombre bon marché : enveloppez votre site dans un conteneur avec filter: invert(1) hue-rotate(180deg) activé via une media query ou un bouton bascule. Cela convertit le texte sombre en clair, les fonds clairs en sombres, tout en préservant la plupart des couleurs. C’est un gain rapide qui gère 80% des exigences de mode sombre sans concevoir deux thèmes. Les vraies images devraient être exclues avec un filter: invert(1) hue-rotate(180deg) imbriqué pour annuler l’inversion, sinon les photos semblent étranges.
• Outils d’accessibilité et modes haute contraste.Les utilisateurs avec des déficiences visuelles peuvent appliquer des filtres au niveau du navigateur (extension haute contraste de Chrome, inversion au niveau de l’OS), mais les designers peuvent aussi offrir des bascules de filtre au niveau du site : un bouton qui applique filter: contrast(2) à toute la page pour les utilisateurs malvoyants. WebAIM et WCAG ne l’exigent pas, mais c’est une courtoisie d’accessibilité à faible coût que certains sites ajoutent.
• Traitements photo artistiques.Les tons sépia, les looks vintage, les effets photo blueprint et autres traitements artistiques combinent les fonctions de filtre : filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) produit un look vintage aux tons froids en une seule déclaration. Comparé aux préréglages d’éditeur d’images, CSS filter est non destructif et réglable en direct sans réexporter.

Pièges courants et ce qu’ils signifient

• Le flou est le filtre coûteux.Parmi les fonctions de filtre, blur() est la plus gourmande en GPU, surtout à grands rayons (plus de 20px) sur de grands éléments. Animer le flou ou l’appliquer à plusieurs éléments simultanément peut faire chuter les fréquences d’images de manière notable. Pour les barres de navigation dépolies collantes, le flou couvre une petite zone et fonctionne bien ; pour les flous modaux plein écran, attendez-vous à un bref hoquet sur les appareils bas de gamme. D’autres filtres (contrast, brightness, saturate) sont presque gratuits sur les GPU modernes.
• Les filtres affectent tous les descendants.Appliquer filter à un conteneur affecte chaque élément enfant à l’intérieur. Si vous enveloppez une carte dans un conteneur avec filter: grayscale(1), le texte à l’intérieur devient aussi en niveaux de gris (ce qui ne change généralement rien puisque le texte est déjà monochrome) et tous les éléments enfants colorés (icônes, badges) perdent leur couleur. Pour filtrer seulement des enfants spécifiques, appliquez le filtre sur eux individuellement, pas sur le parent.
• Le faible contraste nuit à la lisibilité.Réduire le contraste (filter: contrast(0.5)) sur une carte avec du texte à l’intérieur rend le texte plus difficile à lire, le faisant souvent tomber en dessous du ratio de contraste WCAG AA 4.5:1 pour le texte normal. Appliquez prudemment les filtres réduisant le contraste ; vérifiez que tout texte au-dessus reste lisible. Pour les éléments purement décoratifs (images d’arrière-plan, séparateurs), un contraste réduit convient.
• Les filtres ne changent pas les zones cliquables.Contrairement à clip-path, CSS filter ne change pas la zone cliquable d’un élément. Un bouton avec filter: blur(5px) semble doux et flou mais reste entièrement cliquable sur son rectangle original. C’est généralement souhaité mais peut être surprenant quand un élément « fantôme » ou « apparence désactivée » déclenche encore au clic. Combinez filter avec pointer-events: none pour réellement désactiver l’interaction.
• Safari a besoin du préfixe -webkit- pour backdrop-filter.La propriété filter de base est sans préfixe dans tous les navigateurs modernes. Mais backdrop-filter nécessite toujours le préfixe -webkit-backdrop-filter dans Safari (y compris les versions plus récentes). Pour des effets de verre dépoli multi-navigateurs, déclarez à la fois -webkit-backdrop-filter et backdrop-filter avec la même valeur. Les préfixeurs automatiques gèrent cela ; si vous écrivez le CSS à la main, souvenez-vous du préfixe.
• L’animation des chaînes de filtre est saccadée.Les transitions CSS sur filter interpolent en douceur quand la chaîne de filtre reste la même (par ex. transitionner blur(0px) à blur(10px)). Mais ajouter ou supprimer des fonctions au milieu de la transition (par ex. transitionner de blur(0px) à blur(10px) brightness(1.2)) saute brusquement. Pour des transitions multi-filtres en douceur, déclarez tous les filtres aux états de début et de fin avec les valeurs de référence appropriées (brightness(1) est la valeur par défaut).

Confidentialité : tout se passe dans votre navigateur

Les outils générateurs CSS viennent en deux saveurs : pages HTML simples exécutant du JavaScript côté client (privées, rapides) et éditeurs cloud qui sauvegardent vos projets (collaboratifs mais avec des compromis de confidentialité). Cet outil est du premier type. Vos valeurs de curseur, votre CSS généré et même toute image que vous téléversez pour prévisualisation restent entièrement dans votre session navigateur. Rafraîchissez la page et l’état est parti sauf si vous avez copié le CSS d’abord ou enregistré une capture d’écran.

La fonctionnalité « téléverser votre propre image » mérite une note de confidentialité : lorsque vous choisissez un fichier, le navigateur crée une URL blob: locale pointant vers la mémoire, et l’aperçu affiche votre image avec le filtre appliqué. Aucune requête ne va vers un serveur. Ouvrez l’onglet Réseau du navigateur pendant le téléversement ; vous verrez zéro trafic sortant. L’image existe seulement dans la mémoire de l’onglet de votre navigateur et est effacée lorsque vous fermez l’onglet. Pour les images confidentielles (designs propriétaires, scans médicaux, captures d’écran protégées par NDA), c’est la propriété de confidentialité qui compte.

Quand un autre outil est le bon choix

• Photoshop ou Lightroom pour les éditions permanentes.CSS filter est uniquement au moment de l’affichage : le fichier image sous-jacent est inchangé. Si vous voulez que le fichier image réel ait ces ajustements intégrés (taille de fichier plus petite, chargements de page plus rapides, pas de risque de fallback non filtré dans les navigateurs plus anciens), éditez l’image dans Photoshop, Lightroom, GIMP ou Affinity Photo. CSS filter est pour l’affichage dynamique ; les éditeurs d’images sont pour le traitement permanent.
• Image Filters pour un traitement par lots ponctuel.Notre outil Image Filters applique des effets de filtre similaires mais produit un PNG/JPG téléchargeable avec le filtre intégré. Pour traiter de nombreuses images de manière cohérente pour un portfolio, un set de médias sociaux ou une bibliothèque d’actifs, ce flux est plus rapide que d’appliquer des filtres CSS à l’exécution. Les deux outils servent différents cas d’usage.
• Filtre SVG pour les effets complexes.Les raccourcis CSS filter couvrent la plupart des besoins mais pas tout. Distorsion ondulée, noyaux de convolution personnalisés (détection de bord, embossage), motifs de bruit feTurbulence, cartes de déplacement : tous nécessitent des primitives de filtre SVG via SVG inline plus filter: url(#myFilter). Créer des filtres SVG est plus difficile mais débloque des effets que les raccourcis CSS filter ne peuvent pas produire.
• Propriétés personnalisées CSS pour la thématisation.L’astuce « mode sombre inversé » utilisant filter a des limitations : les photos semblent fausses, les couleurs se décalent, les performances peuvent souffrir. Pour un mode sombre de qualité production, les propriétés personnalisées CSS (--bg-color, --text-color) avec deux ensembles de thèmes distincts sont plus propres. Le mode sombre basé sur filter est un gain rapide, pas une solution polie.

Autres questions fréquentes

Puis-je animer les changements de filtre CSS en douceur ?

Oui, avec des réserves. La propriété filter est animable en CSS, et les transitions entre deux chaînes de filtre avec les mêmes fonctions dans le même ordre interpolent en douceur (blur(0px) brightness(1) à blur(10px) brightness(1.5) fonctionne). Ajouter ou supprimer des fonctions au milieu de la transition saute brusquement. Pour une animation multi-filtres en douceur, listez chaque fonction que vous voulez transitionner aux états de début et de fin, en utilisant des valeurs neutres (brightness(1), saturate(1), blur(0px)) là où vous ne voulez pas qu’un filtre spécifique soit appliqué.

CSS filter fonctionne-t-il sur les images d’arrière-plan ?

Oui. CSS filter s’applique à l’élément entier y compris son image d’arrière-plan, son contenu et ses éléments enfants. Si vous voulez filtrer seulement l’image d’arrière-plan mais pas le contenu au premier plan, l’approche typique est d’utiliser un élément enfant séparé pour l’arrière-plan (par ex. un pseudo-élément ::before positionné) avec le filtre appliqué dessus, puis de placer le contenu comme un frère non filtré au-dessus. La propriété backdrop-filter est aussi utile quand vous voulez filtrer ce qui est visible derrière un élément transparent.

Les filtres CSS sont-ils indexés par les moteurs de recherche ?

Les filtres CSS sont purement visuels et ne changent pas le contenu HTML. Les moteurs de recherche indexent le contenu sous-jacent (texte alt d’image, texte environnant) comme si le filtre n’était pas appliqué. Une image en niveaux de gris avec filter: grayscale(1) est toujours indexée comme l’image couleur originale basée sur son fichier et son texte alt. C’est généralement ce que vous voulez : pas d’effets secondaires de filtre sur le SEO ou les lecteurs d’écran.

Pourquoi drop-shadow semble-t-il différent de box-shadow ?

Box-shadow dessine une ombre autour de la boîte rectangulaire d’un élément, ignorant toute transparence. Drop-shadow (filter) dessine une ombre qui suit la forme réellement rendue, y compris les régions transparentes. Pour une icône SVG avec des bords découpés ou un PNG avec transparence, drop-shadow produit une ombre consciente de la forme qui correspond au contour visible. Box-shadow sur le même élément montrerait une ombre rectangulaire autour de la boîte englobante, ce qui semble faux. Utilisez drop-shadow pour les ombres conscientes de la forme, box-shadow pour les éléments rectangulaires.

Quelle est la différence entre opacity et filter: opacity() ?

Dans la plupart des navigateurs ils produisent des résultats visuellement identiques. La différence technique : opacity est une propriété de premier niveau, tandis que filter: opacity() fait partie de la chaîne de filtres et se compose avec d’autres filtres. Si vous avez filter: blur(5px) opacity(0.5), les deux s’appliquent ensemble comme une seule opération GPU. Utiliser opacity en dehors de la chaîne de filtres fonctionne pareil dans la plupart des cas. Tenez-vous-en à opacity pour la transparence autonome ; utilisez filter: opacity() seulement lors de l’enchaînement avec d’autres filtres.

Puis-je réinitialiser tous les filtres rapidement ?

Oui. Définissez filter: none pour supprimer tous les filtres dans une déclaration. C’est la façon la plus propre de réinitialiser, surtout pour les états de survol où vous voulez supprimer tous les effets de filtre à la sortie du survol. Alternativement, réglez chaque fonction de filtre à sa valeur neutre : filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) est fonctionnellement équivalent à filter: none mais plus verbeux.