Generateur de Filtres CSS Gratuit en Ligne
Generez des effets de filtre CSS avec apercu en direct.
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the Generateur de Filtres CSS?
- Développeurs frontend prévisualisant des combinaisons de filtres d'image avant de les appliquer dans un projet.
- Designers UI prototypant des effets visuels d'état de survol et des thèmes de couleur en CSS.
- Développeurs web explorant comment les filtres de luminosité/contraste/saturation interagissent avant d'écrire le CSS final.
How the Generateur de Filtres CSS works
L'outil se charge avec une image de dégradé intégrée en exemple — il n'y a pas d'option de téléversement.
Ajustez les curseurs de filtre : Luminosité, Contraste, Saturation (0–200%), Rotation de teinte (0–360°), Flou (0–20px), Niveaux de gris, Sépia, Inversion (0–100%).
Combinez plusieurs filtres pour obtenir l'effet souhaité ; cliquez sur Reset pour ramener tous les curseurs aux valeurs par défaut.
Copiez la propriété CSS filter depuis le panneau de sortie pour l'utiliser dans votre projet.
Tips & tricks
- Il n'y a pas de téléversement d'image — testez les combinaisons de filtres sur l'aperçu intégré, puis copiez le CSS pour l'appliquer sur votre image réelle.
- Les filtres laissés à leur valeur par défaut (100% luminosité, 0 flou, etc.) sont automatiquement omis de la sortie, gardant le CSS généré minimal.
- opacity() et drop-shadow() ne sont pas inclus comme curseurs ici — ajoutez-les manuellement à la valeur filter copiée si besoin.
- Cliquez sur Reset pour ramener instantanément chaque curseur à sa valeur par défaut et recommencer.
Frequently Asked Questions
Quels filtres CSS cet outil génère-t-il ?
Huit filtres : brightness(), contrast(), saturate(), hue-rotate(), blur(), grayscale(), sepia() et invert(). Tous sont combinés en une seule propriété filter, dans cet ordre, en omettant ceux laissés à leur valeur par défaut (sans effet).
Puis-je téléverser ma propre image pour prévisualiser les filtres ?
Pas actuellement — l'aperçu utilise une image de dégradé fixe intégrée. Copiez le CSS de filtre généré et appliquez-le à votre propre image dans votre projet pour le voir sur du contenu réel.
Comment appliquer un filtre CSS à une image au survol ?
Ajoutez le filtre sur :hover : .image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } Cela crée des transitions de filtre fluides au survol de la souris.
Quelle est la différence entre box-shadow et le filtre drop-shadow ?
box-shadow s'applique à la boîte de l'élément (rectangle). Le filtre drop-shadow() suit la forme alpha réelle de l'élément — parfait pour les images PNG avec transparence où l'on veut que l'ombre suive le contour de l'image. Cet outil n'inclut pas de contrôle drop-shadow ; ajoutez-le manuellement au CSS copié si nécessaire.
Les filtres CSS peuvent-ils être animés ?
Oui. Les filtres CSS sont animables avec des transitions et des animations par images-clés : @keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the Generateur de Filtres CSS?
Completely safe. The Generateur de Filtres CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generateur de Filtres CSS output in commercial projects?
Yes. The Generateur de Filtres CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generateur de Filtres CSS follow official standards?
Yes. The Generateur de Filtres CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.