%22%2F%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%22120%22%20r%3D%2244%22%20fill%3D%22%23fff4c9%22%2F%3E%3Cpath%20d%3D%22M0%20230%20L90%20150%20L170%20220%20L260%20130%20L360%20230%20L480%20160%20V300%20H0Z%22%20fill%3D%22%233d6b4f%22%2F%3E%3Cpath%20d%3D%22M0%20260%20L120%20200%20L230%20260%20L340%20210%20L480%20270%20V300%20H0Z%22%20fill%3D%22%23244a37%22%2F%3E%3C%2Fsvg%3E)
Comment utiliser : Générateur de filtre CSS
- Effets d’image : faites glisser les curseurs (ou choisissez un préréglage) et observez l’aperçu. Cliquez sur Utiliser mon image pour tester le filtre sur votre propre photo : elle reste sur votre appareil.
- Couleur hex en filtre : saisissez une couleur comme
#4f46e5. L’outil trouve unfilterqui transforme une icône noire en cette couleur. - Copiez le CSS et appliquez-le à un
<img>, à un SVG ou à n’importe quel élément.
Fonctions de filtre CSS
| Fonction | Effet | Par défaut |
|---|---|---|
blur(4px) | Flou gaussien | 0 |
brightness(120%), contrast(110%) | plus clair/plus sombre, plus/moins de contraste | 100% |
saturate(150%), grayscale(100%) | plus/moins de couleur | 100%, 0 |
hue-rotate(90deg) | décale toutes les couleurs sur le cercle chromatique | 0deg |
sepia(60%), invert(100%) | ton brun chaud, négatif | 0 |
drop-shadow(0 8px 12px #0006) | une ombre qui suit la transparence de l’image | aucun |
Les filtres s’appliquent dans l’ordre, de gauche à droite : grayscale(100%) sepia(60%) ne donne pas le même résultat que l’inverse.
Recolorer des icônes avec un filtre
Vous ne pouvez pas définir color sur un <img src="icon.svg">, mais vous pouvez le filtrer. En partant du noir, une chaîne comme invert() sepia() saturate() hue-rotate() brightness() contrast() peut atteindre presque n’importe quelle couleur ; cet outil recherche les valeurs qui donnent la plus petite différence visible. Si vous maîtrisez le SVG, fill="currentColor" est plus simple : l’optimiseur SVG peut le faire pour vous.
Aussi recherché comme : générateur filtre css, hex vers filtre css, couleur en filtre css, changer couleur svg css filter, filtre image css, filtre css luminosité contraste, niveaux de gris css, filtre css noir vers couleur.
Outils complémentaires : Générateur de filtre CSS
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
- Générateur border-radius — Arrondissez les coins de n'importe quel élément : utilisez un seul curseur pour tous les coins, ou réglez chaque coin séparément.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
Questions fréquentes
Comment changer la couleur d’une icône SVG ou PNG avec CSS ?
Si l’icône est noire, utilisez Couleur hex en filtre : saisissez votre couleur et appliquez le filtre généré à l’img. Pour les SVG intégrés, définissez fill="currentColor" et utilisez la propriété CSS color à la place.
Pourquoi la couleur du filtre n’est-elle pas exacte ?
Les filtres ne peuvent qu’approcher certaines couleurs. L’outil indique la différence ; relancez la recherche pour un résultat plus proche. Les résultats marqués « Parfait » sont indiscernables à l’œil nu.
Les filtres CSS fonctionnent-ils sur tous les éléments ?
Oui : images, vidéos, SVG, texte et sections entières. Notez que les filtres créent un nouveau contexte d’empilement et peuvent affecter les performances sur de très grandes zones.
Quelle est la différence entre box-shadow et drop-shadow ?
box-shadow suit le rectangle de l’élément ; filter: drop-shadow suit les pixels visibles, donc il épouse les formes transparentes des PNG et des SVG.
Puis-je installer Générateur de filtre CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de filtre CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.