Générateur de filtres CSS
Construisez une déclaration CSS filter ou backdrop-filter à partir de contrôles visuels.
Générateur de filtres CSS
Cet outil crée une déclaration CSS filter (ou backdrop-filter) prête à coller à partir d'un ensemble de contrôles visuels, afin que vous n'ayez pas à vous souvenir de la syntaxe pour combiner flou, luminosité, contraste, nuances de gris, rotation teinte, inverser, opacité, saturation, sépia et ombre portée dans une propriété. Elle est destinée à quiconque stylise une galerie de photos, un effet hover, un panneau en verre dépoli ou un traitement d'image thématique sans écrire manuellement la liste des fonctions de filtre.
Chaque fonction a son propre champ, et la valeur générée ne répertorie que celles que vous avez réellement modifiées — donc une page avec juste un petit flou reste courte au lieu de répertorier neuf fonctions sans effet. Le champ d'ordre des fonctions contrôle l'ordre d'exécution, car les filtres CSS s'appliquent de gauche à droite et les réordonner (flouter avant ou après l'ajustement du contraste, par exemple) peut modifier le résultat visuel. Deux préréglages, vintage et noir et blanc, définissent un groupe complet de valeurs à la fois pour un aspect courant. Basculez "backdrop-filter" pour filtrer ce qui se trouve derrière un élément au lieu de l'élément lui-même — le choix standard pour les panneaux glassmorphism — et changez le format de sortie pour obtenir une classe de valeur arbitraire Tailwind au lieu d'une simple ligne CSS.
Les champs numériques sont automatiquement limités à des plages raisonnables, de sorte qu'une valeur accidentellement énorme ou négative ne casse jamais la sortie ; le champ de couleur d'ombre portée accepte toute valeur de couleur CSS. Le résultat se met à jour en direct lorsque vous ajustez n'importe quelle option, et le décompte au-dessus de la sortie compte le nombre de fonctions réellement actives.
Tout s'exécute localement dans votre navigateur — rien de ce que vous entrez ici n'est téléchargé ni envoyé nulle part. Copiez le résultat, téléchargez-le en tant que fichier .txt ou envoyez-le à l'entrée d'un autre outil pour continuer à l'utiliser.