Générateur de filtres CSS

Appliquer et prévisualiser des effets de filtre CSS avec des curseurs et préréglages visuels

Qu'est-ce que c'est et comment ça marche ?

Les filtres CSS appliquent des effets visuels aux images, arrière-plans et éléments HTML entiers via le rendu accéléré GPU. La propriété filter accepte une ou plusieurs fonctions : blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() et drop-shadow().

Ce générateur fournit des curseurs en direct pour chaque fonction de filtre avec un aperçu en temps réel. La sortie est une déclaration CSS filter prête à coller.

Cas d'usage

• Filtre style Instagram : combinez saturate(1,3), contrast(1,1) et brightness(1,05) pour un effet photo vif.
• Images en mode sombre : appliquez invert(1) hue-rotate(180deg) aux images en mode sombre.
• Recolorer des icônes SVG : transformez une icône noire en couleur de marque avec filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg).

Questions fréquentes

Quelle est la différence entre filter et backdrop-filter ?

filter s'applique à l'élément et son contenu. backdrop-filter ne s'applique qu'à la zone derrière l'élément — pour les effets verre dépoli.

Les filtres CSS impactent-ils les performances ?

Les filtres sont accélérés GPU dans les navigateurs modernes. Animer des filtres sur de grands éléments peut provoquer des saccades.

Puis-je utiliser filter sur des images de fond ?

filter s'applique à tout l'élément. Pour ne filtrer que l'image de fond, placez-la dans un pseudo-élément ::before.

Que fait hue-rotate exactement ?

hue-rotate décale toutes les couleurs autour du cercle chromatique. 0deg = pas de changement ; 180deg = couleurs complémentaires ; 360deg = original.

CSS

Générateur d'ombre de boîte CSS · Générateur de rayon de bordure CSS · Générateur Flexbox · Générateur CSS Grid · Générateur d'ombre de texte CSS · Générateur d'animations CSS