Générateur de Filtres CSS

Contrôles

Aperçu & CSS

CSS 
filter: none;

Comment l'utiliser

  1. Importez ou utilisez l'image d'aperçu — Le filtre est appliqué en direct à l'élément d'aperçu.
  2. Ajustez les curseurs — Réglez flou, luminosité, contraste, saturation, rotation de teinte, sépia, niveaux de gris et inversion individuellement.
  3. Vérifiez l'aperçu en direct — Tous les changements de filtre apparaissent instantanément dans la zone d'aperçu.
  4. Copiez le CSS — Cliquez sur « Copier le CSS » pour récupérer la propriété filter complète à utiliser dans votre feuille de style.

Qu'est-ce que CSS filter ?

La propriété CSS filter applique des effets graphiques à un élément — comme le flou, le décalage de couleur ou l'ajustement de luminosité — directement dans le navigateur, sans logiciel de retouche.

Plusieurs fonctions de filtre peuvent être enchaînées dans une seule déclaration. Elles s'appliquent dans l'ordre et sont accélérées par le GPU dans les navigateurs modernes, ce qui les rend adaptées aux effets d'interface interactifs et aux traitements d'images.

Cas d'usage courants

Effets de survol d'images
Niveaux de gris sur états désactivés
Atténuation d'images en mode sombre
Effets photo vintage/sépia
Couches d'arrière-plan floutées
Superpositions UI teintées
Effet shimmer de squelette de chargement
Mode d'accessibilité à fort contraste

Conseils & bonnes pratiques

Enchaînez les filtres avec soin

L'ordre compte. blur avant contrast donne un résultat différent de l'inverse. Expérimentez avec l'ordre pour des effets uniques.

Performance

Les filtres CSS déclenchent une composition GPU. Évitez d'appliquer de grandes valeurs blur() à des éléments plein écran sur mobile.

Animer les filtres

Toutes les fonctions de filtre se prêtent aux transitions. Utilisez transition: filter 0.3s pour des animations de couleur ou de flou fluides au survol.

Évitez filter sur les contextes d'empilement

Appliquer un filtre crée un nouveau contexte d'empilement, ce qui peut affecter le z-index des éléments enfants. À garder en tête avec les modales.

Questions fréquentes

Quelle différence entre filter et backdrop-filter ?

filter applique les effets à l'élément et à son contenu. backdrop-filter applique les effets à ce qui est rendu derrière l'élément.

Puis-je utiliser plusieurs filtres à la fois ?

Oui. Séparez les fonctions par un espace : filter: brightness(1.2) contrast(1.1) saturate(0.8);. Toutes les fonctions s'appliquent en séquence.

CSS filter fonctionne-t-il sur les éléments SVG ?

Oui. CSS filter fonctionne sur les SVG en ligne et les balises <img> contenant des SVG dans tous les navigateurs modernes.

Comment réinitialiser tous les filtres ?

Définissez filter: none; pour supprimer tous les effets de filtre appliqués à un élément.