ZenovayTools

Générateur de filtres CSS

Générez des effets de filtre CSS avec aperçu en direct. Ajustez le flou, la luminosité, le contraste, la désaturation, la rotation de teinte, l'inversion, la saturation, la sépia et l'ombre portée.

Presets

Filters

Blur0px
Brightness100%
Contrast100%
Grayscale0%
Hue Rotate0deg
Invert0%
Opacity100%
Saturate100%
Sepia0%

Preview

Original

Original

Filtered

Filtered
CSS Code
filter: none;

Comment utiliser Générateur de filtres CSS

  1. 1Ajustez les curseurs de filtre (flou, luminosité, contraste, etc.).
  2. 2Voir l'effet appliqué à une image d'exemple en temps réel.
  3. 3Combinez plusieurs filtres pour des effets complexes.
  4. 4Copiez la propriété de filtre CSS générée.
ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Outils connexes

Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.
Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.
Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.
Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Qu'est-ce que la propriété de filtre CSS ?▾
La propriété de filtre CSS applique des effets visuels comme le flou, la luminosité, le contraste et les décalages de couleur aux éléments. Elle fonctionne sur n'importe quel élément : images, divs, texte, vidéos, SVG. Les filtres sont appliqués dans l'ordre indiqué et peuvent être combinés. Supporté dans tous les navigateurs modernes depuis 2015.
Quels filtres CSS sont disponibles ?▾
Filtres standard : blur(px), brightness(%), contrast(%), grayscale(%), hue-rotate(deg), invert(%), opacity(%), saturate(%), sepia(%), drop-shadow(x y blur color). De plus, url() peut référencer des filtres SVG pour des effets personnalisés.
Quelle est la différence entre filter et backdrop-filter ?▾
filter applique des effets à l'élément lui-même et à son contenu. backdrop-filter applique des effets à la zone derrière l'élément (utilisé pour le glassmorphisme). Par exemple, filter: blur(5px) floute l'élément ; backdrop-filter: blur(5px) floute tout ce qui est visible à travers un élément semi-transparent.
Les filtres CSS affectent-ils les performances ?▾
Les filtres déclenchent l'accélération GPU, qui est efficace pour les éléments statiques mais peut être coûteux lors de l'animation. blur() est le filtre le plus gourmand en performances. Bonnes pratiques : évitez les grands rayons de flou sur les grands éléments, utilisez will-change: filter pour les animations, évitez de filtrer les éléments avec de nombreux descendants.
Comment créer un filtre de type Instagram ?▾
Combinez plusieurs filtres CSS pour reproduire les effets photo. Exemple "Nashville" : brightness(1.1) contrast(1.2) saturate(1.35) sepia(0.25). Exemple "Clarendon" : brightness(1.25) contrast(1.2) saturate(1.35). Empilez 2-4 filtres et ajustez les valeurs pour créer des looks uniques.