Générateur de filtres CSS (filter) pour images

Générateur de filtres CSS (filter) pour images: à quoi ça sert

La propriété filter du CSS applique des effets photo, sans modifier le fichier. Choisissez une photo et réglez la luminosité, le contraste, la saturation, les niveaux de gris, le sépia, la teinte, l’inversion, le flou, l’opacité et l’ombre qui suit le contour (drop-shadow).

Partez de l’un des filtres prêts à l’emploi (noir et blanc, vintage, froid, chaud, délavé, éclatant, nocturne), copiez le CSS ou téléchargez l’image avec le filtre appliqué. L’option de survol génère l’effet classique de la photo qui redevient normale au survol, avec une transition qui respecte les personnes ayant demandé moins de mouvement.

Mode d’emploi

1. Choisissez la photo ou utilisez celle de l’exemple.
2. Réglez les commandes ou choisissez un filtre prêt à l’emploi.
3. Copiez le CSS ou téléchargez l’image.

Quand l’utiliser

• Photos d’équipe en noir et blanc.
• Galerie avec effet au survol.
• Logos avec ombre sur le contour.

Questions fréquentes

Quel est l’avantage d’utiliser filter plutôt que de retoucher la photo ?

La même photo sert pour plusieurs effets, et on peut animer le changement, comme une photo en noir et blanc qui devient colorée au survol. Il n’est pas nécessaire d’enregistrer une version pour chaque effet.

L’ordre des filtres compte-t-il ?

Oui. Les filtres sont appliqués de gauche à droite, et chacun travaille sur le résultat du précédent. C’est pourquoi un sépia suivi d’un changement de teinte donne un résultat différent de l’ordre inverse.

Quelle est la différence entre drop-shadow et box-shadow ?

box-shadow dessine l’ombre du rectangle de l’image. drop-shadow, qui est un filtre, suit le contour de ce qui est visible ; il fonctionne donc avec les PNG et SVG à fond transparent, comme les logos et les détourages.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires