Choisissez filter ou backdrop-filter et ajustez un préréglage à l’aide des contrôles et de l’aperçu. Copiez les déclarations CSS pour appliquer l’effet à votre page.
Fonctionne localement dans votre navigateurL’atelier compose une seule déclaration filter à partir de huit fonctions : luminosité, contraste, saturation, niveaux de gris, sépia, rotation de teinte, flou et opacité. Choisissez d’abord la propriété — filter s’applique à l’élément lui-même, backdrop-filter à ce qui se trouve derrière — puis bougez les contrôles en suivant l’aperçu.
Le panneau d’export contient la déclaration finale : une ligne filter, ou les deux lignes backdrop-filter avec le préfixe -webkit- encore nécessaire à Safari. Copiez-les dans votre règle. Rien ne quitte le navigateur et la page fonctionne hors ligne.
filter s’applique à l’élément et à tout ce qu’il dessine, enfants et texte compris. backdrop-filter laisse l’élément intact et filtre les pixels situés derrière lui ; c’est pourquoi un panneau de verre a besoin d’un fond partiellement transparent pour que l’effet soit visible.
La prise en charge n’est pas identique : Safari exige encore le préfixe -webkit-backdrop-filter, et le panneau d’export écrit les deux lignes pour cette raison. Quand un moteur ne prend pas la propriété en charge, il ignore la déclaration et l’élément s’affiche normalement ; considérez donc le verre comme une décoration, pas comme une structure.
Chaque contrôle correspond à une fonction CSS : luminosité, contraste et saturation prennent des pourcentages autour du neutre 100 % ; niveaux de gris, sépia et opacité vont de 0 à 100 % ; la rotation de teinte accepte des degrés de -360 à 360 ; le flou, des pixels par pas de 0,5. L’ordre est fixe et appliqué tel quel : hue-rotate(-8deg) avant blur(14px) ne donne pas toujours le même résultat que l’ordre inverse.
Les fonctions restées à leur valeur neutre sont absentes de l’export. La chaîne reste néanmoins une seule déclaration : chaque fonction transforme le résultat de la précédente, pas les pixels d’origine.
Chaque champ est ramené dans sa plage avant l’écriture du CSS : luminosité et contraste de 0 à 300, saturation de 0 à 500, niveaux de gris, sépia et opacité de 0 à 100, rotation de teinte de -360 à 360, flou de 0 à 40 par pas de 0,5. Saisir -5 dans le flou ou 500 dans les niveaux de gris revient à 0 et 100 à la sortie du champ, et un champ vide reprend sa valeur précédente. La déclaration exportée reste ainsi valide : le navigateur abandonne tout le filtre dès qu’une fonction porte une valeur qu’il ne peut pas interpréter.
filter et backdrop-filter sont composés sur le GPU, et le flou est la fonction coûteuse : un backdrop blur de 14 px sur une grande surface peut coûter plus cher que tout le reste réuni, surtout au défilement. Gardez la surface floutée petite et testez sur l’appareil le plus lent que vous prenez en charge.