🎚️Générateur de filtre CSS

Fonctions et unités de filter

La propriété CSS filter applique des effets à l'apparence des images ou des éléments. Elle s'écrit en énumérant des fonctions comme blur et sepia, séparées par des espaces

• px (pixel)：La fonction blur spécifie le rayon de flou en px. Avec 4px, les couleurs se mélangent sur une plage de 4 pixels de rayon
• % (pourcentage)：Les fonctions brightness et sepia spécifient l'intensité de l'effet en %. Pour brightness, 100% est la luminosité d'origine, 120% est 20% plus lumineux
• deg (degré)：La fonction hue-rotate spécifie l'angle de rotation des couleurs sur la roue chromatique en deg. Avec 180deg, la couleur passe à la teinte opposée

Pourquoi l'ordre change-t-il le résultat ?

Les fonctions énumérées dans filter s'appliquent de gauche à droite. L'effet suivant s'applique après l'effet précédent, donc changer l'ordre peut changer l'apparence. Par exemple, appliquer le sépia après le niveau de gris laisse une teinte brune, tandis qu'appliquer le niveau de gris après le sépia élimine la teinte brune. Cet outil fixe l'ordre d'application, mais vous pouvez changer l'ordre en éditant le code CSS généré

Différence avec backdrop-filter

filter et backdrop-filter utilisent les mêmes fonctions, mais ils s'appliquent à des cibles différentes

• filter：filter est une propriété qui applique l'effet à l'élément lui-même (images, texte, etc.)
• backdrop-filter：backdrop-filter est une propriété qui applique l'effet à la partie visible derrière l'élément, utilisée pour des effets de verre dépoli