6XC

Générateur de filtres CSS

Combinez blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia et invert avec aperçu en direct.

1 023 vues

6XC

La propriété filter

filter applique des effets de retouche d'image à n'importe quel élément — photos, vidéos, voire des mises en page entières. Les fonctions s'enchaînent en une seule déclaration : filter: brightness(110%) contrast(120%) saturate(130%) donne un look "Instagram" percutant, grayscale(100%) est le style hommage classique en noir et blanc, et hue-rotate recolore des visuels sans nouveaux fichiers.

Questions fréquentes

filter affecte-t-il les performances ?

La plupart des filtres sont accélérés par le GPU et ne posent pas de problème sur quelques éléments. Le flou est le plus coûteux — gardez des rayons faibles sur les grandes surfaces, surtout sur mobile.

Quelle est la différence entre filter et backdrop-filter ?

filter affecte l'élément lui-même et son contenu ; backdrop-filter affecte ce qui est visible derrière l'élément — c'est ce qu'utilise le glassmorphisme.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer