Générateur de Filtres CSS
Générez des effets de filtre CSS visuellement. Ajustez flou, luminosité, contraste, niveaux de gris, rotation de teinte, inversion, opacité, saturation et sépia avec aperçu en direct. Gratuit.
Ou glissez une image sur l'aperçu
Référence
Qu'est-ce que la propriété CSS filter ?
La propriété CSS filter applique des effets graphiques comme le flou, le décalage de couleur et l'ajustement du contraste à un élément. Les filtres sont appliqués avant que l'élément ne soit composé, affectant l'élément entier y compris ses bordures et ombres. Plusieurs fonctions de filtre peuvent être enchaînées dans une seule déclaration.
Toutes les fonctions de filtre CSS
blur(px) : Applique un flou gaussien. Valeurs plus élevées = plus de flou.
brightness(%) : Ajuste la luminosité. 100% = original, 0% = complètement noir.
contrast(%) : Ajuste le contraste. 100% = original, 0% = complètement gris.
grayscale(%) : Convertit en niveaux de gris. 0% = original, 100% = entièrement gris.
hue-rotate(deg) : Fait tourner les couleurs sur le cercle chromatique. 0deg = original, 180deg = teintes opposées.
invert(%) : Inverse les couleurs. 0% = original, 100% = entièrement inversé.
opacity(%) : Ajuste la transparence. 100% = entièrement opaque, 0% = entièrement transparent.
saturate(%) : Ajuste la saturation des couleurs. 100% = original, au-dessus de 100% = super-saturé.
sepia(%) : Applique un ton sépia. 0% = original, 100% = entièrement sépia.
Considérations de performance
Les filtres CSS sont accélérés par GPU dans les navigateurs modernes. Cependant, appliquer des filtres à de grandes zones ou animer des valeurs de filtre peut causer des redessinages. Pour de meilleures performances : utilisez will-change: filter sur les éléments à animer et préférez backdrop-filter quand vous ne voulez flouter que l'arrière-plan.
Cas d'utilisation courants
Effets hover sur images — niveaux de gris au repos, couleur au survol.
État désactivé — filter: grayscale(100%) opacity(50%) pour les éléments désactivés.
Mode sombre — filter: invert(1) hue-rotate(180deg) comme astuce rapide.
Flou d'arrière-plan — backdrop-filter: blur(10px) pour les superpositions en verre dépoli.
Photo vintage — combiner sépia, contraste et luminosité pour un look film analogique.
Confidentialité
Toute la génération de filtres s'exécute à 100% dans votre navigateur. Aucune donnée n'est envoyée à un serveur. Les images téléchargées restent sur votre appareil.