Générateur de filtres CSS

Le générateur de filtres CSS est un éditeur visuel pour la propriété de filtre CSS. Vous déplacez un curseur pour chaque fonction de filtre - flou, luminosité, contraste, saturé, niveaux de gris, sépia, inverti, rotation de teinte et opacité - et regardez l'effet s'appliquer à un aperçu en temps réel, puis copiez le CSS exact qu'il produit.

La propriété Filter applique des effets graphiques tels que le flou, le changement de couleur et le réglage du contraste directement dans le navigateur, sans éditeur d'images requis. Plusieurs fonctions peuvent être enchaînées dans une seule déclaration et sont appliquées dans l'ordre, ce qui montre comment le style photo est construit, tel que le vintage, le chaud et le dramatique. Cet outil gère cette chaîne pour vous et ne produit que les fonctions que vous avez réellement modifiées, en gardant le CSS propre.

Tout se passe dans votre navigateur. Commencez à partir d'un préréglage comme Vintage ou Grayscale, affinez chaque fonction et copiez la déclaration. Aucun compte, aucun téléchargement, et il continue de fonctionner hors connexion une fois la page chargée.

Les filtres s'appliquent dans l'ordre écrit, et l'ordre change le résultat : en niveaux de gris puis sépia n'est pas la même chose que sépia puis niveaux de gris, car le premier supprime la couleur que le second teinterait Le gotcha qui mérite d'être connu est structurel plutôt que visuel Tout élément avec un filtre autre que nul devient un bloc contenant pour ses descendants fixes et absolument positionnés, donc une baisse ou un modal à l'intérieur d'un parent filtré se positionnera contre ce parent au lieu de la fenêtre d'affichage Il crée également un nouveau contexte d'empilement, qui peut briser l'ordre des indices z qui fonctionnait auparavant Si un filtre brise une disposition d'une manière qui semble sans rapport avec l'apparence, c'apparence, c'ailleurs presque toujours pourquoi les filtres sont les éléments flous sur GPU coûteux mais les plus grands.