CSS Filter Generator

À propos de cet outil

Le générateur de filtres CSS permet d'ajuster visuellement neuf fonctions de filtre CSS — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate et sepia — et de voir l'effet combiné en temps réel.

Les filtres CSS appliquent des effets visuels similaires à un logiciel de retouche photo sur des éléments HTML. Ils sont accélérés par GPU et fonctionnent sur les images, arrière-plans, textes et tout élément HTML.

Comment utiliser

1. Faites glisser n'importe quel curseur pour appliquer cet effet de filtre.
2. Combinez plusieurs filtres — l'aperçu se met à jour en direct.
3. Les filtres à valeur par défaut sont automatiquement exclus du résultat.
4. Cliquez sur Tout réinitialiser pour revenir aux valeurs par défaut.
5. Cliquez sur Copier pour copier la propriété CSS filter.

Cas d'utilisation

Les designers utilisent grayscale et sepia pour des sections monochromes. Les développeurs utilisent blur pour des arrière-plans en verre dépoli. brightness est couramment utilisé pour les effets de survol. Les implémentations mode sombre utilisent invert.

Questions fréquentes

• Quelle est la différence entre filter et backdrop-filter ? — filter s'applique à l'élément et à tous ses enfants. backdrop-filter s'applique uniquement à la zone derrière l'élément (utile pour les superpositions en verre dépoli).
• Puis-je combiner plusieurs filtres ? — Oui. Listez-les séparés par des espaces dans la propriété filter. Cet outil le fait automatiquement.
• Les filtres CSS affectent-ils les performances ? — Les filtres simples comme grayscale et brightness sont économiques. Le blur est plus coûteux, surtout sur de grandes zones — utilisez-le avec modération sur mobile.