Générateur de filtre CSS
Construisez une chaîne réorganisable de fonctions CSS filter() et backdrop-filter() et prévisualisez-la en direct sur votre propre photo, avec une ligne CSS copiable et un export PNG.
🔒 Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
Chaque générateur de filtre CSS vous laisse empiler blur(), brightness(), contrast() et les autres — mais presque aucun ne laisse l’ordre avoir de l’importance, car la plupart appliquent les filtres dans une séquence fixe. Celui-ci est différent : la chaîne de filtres est une vraie liste réorganisable, construite avec le glisser-déposer natif HTML5, et réordonner deux fonctions change réellement les pixels produits, exactement comme en CSS de production. Flou puis rotation de teinte n’a pas le même rendu que rotation de teinte puis flou, et vous pouvez désormais voir pourquoi avant de l’intégrer.
Importez votre propre photo et les neuf fonctions filtrables — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert et drop-shadow — s’appliquent en direct dessus comme une déclaration CSS filter sur un élément <img>, pas un échantillon simulé. Ajoutez une fonction depuis la liste, faites glisser sa ligne vers le haut ou le bas pour changer sa position dans la chaîne, ajustez son curseur, et la prévisualisation comme la ligne filter: ...; copiable se mettent à jour à chaque action. Retirez une étape avec son propre bouton, directement dans la ligne.
Une seconde chaîne, plus petite, construit une valeur backdrop-filter appliquée à un panneau de superposition placé au-dessus de la prévisualisation, vous permettant de voir l’effet verre dépoli — la technique derrière les barres de navigation translucides et arrière-plans de fenêtres modales modernes — sans toucher à la chaîne de filtres de l’image sous-jacente. Cela fonctionne même avant d’importer une photo, sur le fond coloré de l’espace réservé, vous pouvez donc concevoir un panneau dépoli en quelques secondes.
Quand la prévisualisation est bonne, copiez le CSS directement depuis la zone de sortie, ou exportez un vrai PNG : la même chaîne de filtres est transmise à la propriété ctx.filter d’un contexte Canvas 2D — qui utilise la syntaxe identique à celle de la propriété CSS filter — et le canevas est converti en fichier téléchargeable via canvas.toBlob(). L’image exportée correspond exactement à la prévisualisation en direct, car elle est produite par la même chaîne de filtres exécutée par la même primitive de rendu. Tout se passe localement dans votre navigateur ; votre photo n’est jamais téléversée où que ce soit.