L'ordre des filtres compte-t-il ?

Oui. Les filtres CSS s'appliquent de gauche à droite, et beaucoup ne sont pas commutatifs. `filter: blur(8px) grayscale(100%)` floute d'abord l'image en couleur puis désature ; `grayscale(100%) blur(8px)` désature puis floute le résultat en niveaux de gris. La différence visuelle est subtile pour la plupart des paires mais évidente pour blur + contraste ou blur + drop-shadow.

Pourquoi filter est-il plus lent que des astuces de fond ?

Les filtres forcent le navigateur à allouer un canvas hors écran, à y rendre l'élément, à exécuter le shader du filtre, puis à composer le résultat. Les filtres légers (luminosité, contraste, saturation) sont peu coûteux ; les lourds (blur, drop-shadow avec un grand rayon) peuvent faire passer une animation de 60 fps à 20. Évitez les filtres sur des éléments qui s'animent ou défilent en continu - appliquez-les une fois et laissez composer.

Différence entre filter et backdrop-filter ?

`filter` s'applique à l'élément lui-même - l'image dans le ` ` ou le contenu peint d'un ` `. `backdrop-filter` s'applique à ce qui est rendu *derrière* l'élément, visible à travers son fond. Utilisez `filter` pour des effets d'image (style Instagram) ; utilisez `backdrop-filter` pour les surcouches en verre dépoli sur une image. Le générateur glassmorphism couvre le second cas.

Peut-on animer les valeurs de filter ?

Oui - `filter` est animable en transitions et keyframes CSS. Chaque fonction interpole indépendamment, ce qui est ce qu'on veut pour des crossfades du net au flou ou de la couleur au gris. Le piège, c'est la perf : animer un blur de 0 à 24 px stresse le GPU sur la plupart des portables. Testez sur l'appareil le plus lent que vous supportez.

Pourquoi mes filtres ne marchent pas sur un iframe ?

Restrictions cross-origin. Les filtres CSS fonctionnent sur du contenu même origine (votre page, vos SVG et images), mais le navigateur refuse de filtrer un iframe ou une image cross-origin servis sans `Access-Control-Allow-Origin: *`. Servez l'asset depuis votre domaine, ou utilisez un CDN CORS-friendly.

Générateur de filtre CSS

Terrain de jeu CSS filter avec curseurs pour blur, luminosité, contraste, saturation, sépia, niveaux de gris, inversion, hue-rotate et opacité.

Préréglages

Flou0px

Luminosité100%

Contraste100%

Saturation100%

Sépia0%

Niveaux de gris0%

Inversion0%

Rotation teinte0deg

Opacité100%

CSS

filter: none;

Aperçu

Glissez les curseurs pour toute combinaison de fonctions CSS filter et l'aperçu se met à jour en direct. Chaque curseur est câblé à une fonction (`blur(Npx)`, `brightness(N%)`, etc.) ; la sortie combine dans l'ordre source, ce qui compte - un blur avant niveaux de gris diffère d'un niveaux de gris avant blur. Les préréglages recréent l'allure des filtres Instagram comme point de départ.

Comment l'utiliser

Préréglage ou départ vierge
Les préréglages donnent un point de départ en un clic. Sautez-les et réglez de zéro si vous préférez.
Glissez chaque fonction
Blur, luminosité, contraste, saturation, sépia, niveaux de gris, inversion, hue-rotate, opacité - un curseur par fonction.
Réordonnez si nécessaire
Coupez ou réordonnez les fonctions quand le rendu dépend de l'ordre (blur + niveaux de gris).
Copiez le CSS
La déclaration `filter:` combinée est prête à coller dans votre feuille de style.

Qu'est-ce que c'est ?

La propriété CSS `filter` applique un effet graphique (flou, décalage colorimétrique, contraste, etc.) à un élément avant la composition. C'est le remplacement web moderne des calques de réglage Photoshop et des chaînes SVG `<filter>` - accéléré par GPU quand le navigateur peut, déclaratif, et empilable. Chaque fonction prend un paramètre (longueur pour blur, pourcentage pour la plupart des fonctions colorimétriques, angle pour hue-rotate) et produit un effet identique à sa primitive SVG-filter équivalente.

Quand l'utiliser

Recréer des filtres image style Instagram en CSS, atténuer ou désaturer un état hover sans changer d'image, construire des galeries où les vignettes inactives sont légèrement floutées, atténuer une image de fond derrière du texte hero, appliquer une luminosité à des images délavées en mode sombre, et déboguer rapidement les assets (`filter: invert(1)` pour repérer les images cassées).

Erreurs courantes

Empiler trop de filtres sur une grosse image - la perf s'effondre. Animer `filter: blur()` pour des effets de « respiration » sur les images hero - même les appareils modestes peinent. Mettre `filter` sur le même élément que `backdrop-filter` (ça fonctionne mais l'interaction est confuse). Oublier que filter s'applique aussi à tous les enfants - un parent en `filter: grayscale(1)` désature toute la descendance, y compris la vidéo, même si elle est en couleur.

FAQ

L'ordre des filtres compte-t-il ?: Oui. Les filtres CSS s'appliquent de gauche à droite, et beaucoup ne sont pas commutatifs. `filter: blur(8px) grayscale(100%)` floute d'abord l'image en couleur puis désature ; `grayscale(100%) blur(8px)` désature puis floute le résultat en niveaux de gris. La différence visuelle est subtile pour la plupart des paires mais évidente pour blur + contraste ou blur + drop-shadow.
Pourquoi filter est-il plus lent que des astuces de fond ?: Les filtres forcent le navigateur à allouer un canvas hors écran, à y rendre l'élément, à exécuter le shader du filtre, puis à composer le résultat. Les filtres légers (luminosité, contraste, saturation) sont peu coûteux ; les lourds (blur, drop-shadow avec un grand rayon) peuvent faire passer une animation de 60 fps à 20. Évitez les filtres sur des éléments qui s'animent ou défilent en continu - appliquez-les une fois et laissez composer.
Différence entre filter et backdrop-filter ?: `filter` s'applique à l'élément lui-même - l'image dans le `<img>` ou le contenu peint d'un `<div>`. `backdrop-filter` s'applique à ce qui est rendu *derrière* l'élément, visible à travers son fond. Utilisez `filter` pour des effets d'image (style Instagram) ; utilisez `backdrop-filter` pour les surcouches en verre dépoli sur une image. Le générateur glassmorphism couvre le second cas.
Peut-on animer les valeurs de filter ?: Oui - `filter` est animable en transitions et keyframes CSS. Chaque fonction interpole indépendamment, ce qui est ce qu'on veut pour des crossfades du net au flou ou de la couleur au gris. Le piège, c'est la perf : animer un blur de 0 à 24 px stresse le GPU sur la plupart des portables. Testez sur l'appareil le plus lent que vous supportez.
Pourquoi mes filtres ne marchent pas sur un iframe ?: Restrictions cross-origin. Les filtres CSS fonctionnent sur du contenu même origine (votre page, vos SVG et images), mais le navigateur refuse de filtrer un iframe ou une image cross-origin servis sans `Access-Control-Allow-Origin: *`. Servez l'asset depuis votre domaine, ou utilisez un CDN CORS-friendly.