Générateur de Filtres CSS
Créez des effets de filtre CSS visuellement — flou, luminosité, contraste, niveaux de gris et plus.
① Ajustez les filtres avec les curseurs ② Importez votre image ③ Copiez le CSS
Préréglages
filter: none
1x
1x
1x
0
0
0px
0°
0
1
Sortie CSS
filter: none;
backdrop-filter (glassmorphisme)
backdrop-filter: none;
Qu'est-ce que la propriété CSS filter ?
La propriété CSS filter applique des effets graphiques à n'importe quel élément HTML — images, divs, vidéos, SVG ou sections entières. Elle supporte neuf fonctions : blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity() et saturate(). Plusieurs filtres sont chaînés séparés par des espaces : filter: brightness(1.2) contrast(1.1) grayscale(0.3) — l'ordre est important. La propriété est accélérée GPU. Note : filter crée un nouveau contexte d'empilement pouvant affecter le z-index.
Questions Fréquentes
La propriété CSS filter applique des effets visuels : blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity et saturate.
Oui. CSS filter fonctionne sur n'importe quel élément HTML. Note : filter crée un contexte d'empilement affectant le z-index.
Listez les fonctions séparées par des espaces : filter: brightness(1.2) contrast(1.1) blur(2px). L'ordre est important.
hue-rotate(Ndeg) décale les couleurs sur la roue chromatique. 0deg = pas de changement, 180deg inverse les teintes.
CSS filter offre des effets simplifiés. Le filtre SVG est plus puissant avec des opérations arbitraires.
CSS filter déclenche la composition GPU. blur() est le plus coûteux avec de grandes valeurs.
filter: sepia(0.5) contrast(1.2) brightness(1.05). Noir et blanc : filter: grayscale(1) contrast(1.1).