Aller au contenu
EN

Générateur de filtres CSS

Appliquez des filtres CSS à une image en direct : flou, luminosité, contraste, saturation, noir et blanc, sépia, teinte, inversion. Code CSS et image filtrée.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Réglez les filtres CSS sur une image d'exemple ou sur votre propre photo : flou, luminosité, contraste, saturation, niveaux de gris, sépia, rotation de teinte, inversion et opacité, avec 10 filtres tout prêts (vintage, noir et blanc, dramatique…). Comparez avec l'original, copiez le code ou enregistrez la photo filtrée.

Dans quels cas l'utiliser ?

Effets de survol

Une image en noir et blanc qui reprend ses couleurs au survol (grayscale(100%) puis none) est un effet élégant pour une galerie ou des logos de partenaires.

Harmoniser des images

Un même filtre léger appliqué à toutes les photos d'une page leur donne une ambiance commune, sans retoucher les fichiers.

Retouche rapide

Éclaircir, saturer ou passer une photo en sépia, puis l'enregistrer, sans installer de logiciel.

Mode d'emploi

  1. Choisissez un filtre tout prêt ou réglez chaque curseur.
  2. Essayez le résultat sur votre propre photo.
  3. Copiez le code CSS ou enregistrez la photo filtrée.

Comment ça marche

Le code filter n'écrit que les fonctions qui changent quelque chose, dans un ordre fixe. L'aperçu est l'image elle-même avec ce code appliqué par le navigateur.

Pour enregistrer la photo, l'image est dessinée dans un canvas avec la même chaîne de filtres (propriété filter du canvas), en taille réelle jusqu'à 16 millions de pixels, puis enregistrée en PNG. Rien n'est envoyé sur Internet.

Conseils pour un bon résultat

  • Peu de filtres, peu prononcés : contraste 110 % et saturation 120 % suffisent souvent.
  • Le flou est coûteux à animer sur de grandes images : préférez-le pour des fonds fixes.
  • Pour des logos en noir et blanc qui se colorent au survol, ajoutez une transition sur filter.
  • hue-rotate change toutes les couleurs : pratique pour décliner une illustration en plusieurs teintes.

Problèmes fréquents et solutions

La photo enregistrée n'a pas le filtre

Votre navigateur n'applique pas les filtres du canvas (Safari avant la version 18). Utilisez Chrome, Edge ou Firefox, ou mettez Safari à jour.

Le flou déborde de l'image

Le flou s'étale au-delà des bords. Placez l'image dans un conteneur avec overflow: hidden.

Les couleurs sont fausses après inversion

invert inverse aussi les tons de peau et le ciel : combinez-le avec hue-rotate(180deg) pour retrouver des teintes proches.

Questions fréquentes

Quels filtres propose CSS ?

blur (flou), brightness (luminosité), contrast, saturate, grayscale (niveaux de gris), sepia, hue-rotate (rotation des teintes), invert et opacity. On peut les enchaîner dans une seule propriété filter.

L'ordre des filtres compte-t-il ?

Oui, ils s'appliquent dans l'ordre écrit. L'outil utilise toujours le même ordre, ce qui garantit que l'aperçu correspond au code.

Quelle différence avec backdrop-filter ?

filter modifie l'élément lui-même ; backdrop-filter modifie ce qu'il y a derrière lui (effet verre dépoli). Le code des deux est fourni.

Puis-je garder l'image filtrée ?

Oui : avec votre photo, « Enregistrer la photo filtrée » produit un PNG avec les filtres appliqués, sur votre appareil.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.