Générateur de filtre CSS

Réglez visuellement un filtre CSS (flou, luminosité, contraste, saturation, niveaux de gris, sépia, inversion, rotation de teinte) sur une image d'aperçu, puis copiez le code filter obtenu. Rien n'est envoyé à un serveur : tout se calcule directement dans votre navigateur.

Exemples :
Code CSS

Comment ça marche

La propriété CSS filter applique des effets graphiques (flou, luminosité, contraste...) directement dans le navigateur, sans retoucher l'image source. Cet outil vous permet de composer plusieurs effets à la fois sur un aperçu en direct, puis de récupérer la valeur exacte à coller dans votre feuille de style, sur une image, une vignette de galerie ou un effet de survol.

Le filtre CSS modifie-t-il le fichier image d'origine ?

Non. filter est un effet purement visuel appliqué au rendu de l'élément par le navigateur : le fichier image reste intact sur le disque. Pour obtenir une image définitivement modifiée, il faudrait la redessiner sur un canvas puis l'exporter.

Peut-on animer un filtre CSS au survol ?

Oui, en combinant la propriété avec une règle :hover et une transition sur filter, l'effet passe progressivement d'un état à l'autre, un procédé courant pour les vignettes de portfolio ou les cartes produit.

Aucune image ni donnée n'est transmise à un serveur : le calcul du filtre s'exécute uniquement dans votre navigateur.