Générateur de filtres de fond CSS

Créez du CSS backdrop-filter en direct en faisant glisser les curseurs de neuf fonctions de filtre : blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate et sepia. La sortie émet à la fois backdrop-filter et -webkit-backdrop-filter pour que l'effet fonctionne sur les navigateurs modernes, et une carte de verre est rendue sur un arrière-plan personnalisable afin que vous voyiez le résultat au fur et à mesure.

1. Cliquez facultativement sur un préréglage (Frosted Glass, Dark Glass, Vintage, Inverted) pour partir d'une apparence étudiée. 2. Faites glisser les curseurs dans le panneau Controls ; chaque filtre n'apparaît dans le CSS généré que lorsqu'il diffère de sa valeur par défaut (par ex. brightness/contrast/saturate/opacity par défaut 100, blur par défaut 0). 3. Modifiez le champ Background avec toute valeur CSS background valide (dégradé, url d'image, couleur) pour tester le filtre sur différents arrière-plans. 4. Cliquez sur Copy pour copier les deux déclarations backdrop-filter et -webkit-backdrop-filter.

blur 0–50px ; brightness 0–200 % (par défaut 100) ; contrast 0–200 % (par défaut 100) ; grayscale 0–100 % ; hue-rotate 0–360deg ; invert 0–100 % ; opacity 0–100 % (par défaut 100) ; saturate 0–200 % (par défaut 100) ; sepia 0–100 %. Reset rétablit chaque curseur à sa valeur par défaut. Les filtres à leur valeur neutre sont omis de la sortie ; si tous sont neutres, la sortie est backdrop-filter: none.