Générateur de filtres CSS Appliquez des effets de filtre CSS tels que le flou, la luminosité, le contraste et bien plus encore avec des commandes visuelles.

🎨

Générateur de filtres CSS

Appliquez des effets de filtre CSS tels que le flou, la luminosité, le contraste et bien plus encore avec des commandes visuelles.

Ajuster les valeurs de filtre

Utilisez les curseurs pour contrôler le flou, la luminosité, le contraste et d'autres effets de filtre.

Prévisualiser le résultat

Voyez les effets de filtre combinés appliqués à un élément de prévisualisation en temps réel.

Copier le CSS

Copiez la propriété de filtre générée avec toutes les fonctions de filtre actives.

Loading tool...

What Is Générateur de filtres CSS?

Le générateur de filtres CSS propose des contrôles visuels pour toutes les fonctions de filtre CSS : flou, luminosité, contraste, nuances de gris, rotation de teinte, inversion, opacité, saturation et sépia. Les filtres CSS appliquent des effets graphiques aux éléments, similaires à ceux d'un logiciel de retouche d'images. Cet outil vous permet de combiner plusieurs fonctions de filtre et de voir leur effet combiné en temps réel sur un élément d'aperçu. Seuls les filtres actifs (ceux qui ont été modifiés par rapport à leurs valeurs par défaut) sont inclus dans le CSS généré, ce qui maintient le code propre. La propriété filter est largement utilisée pour les effets d'image, l'amélioration des états de survol, les traitements de fond et la personnalisation des états désactivés ou en chargement. Un bouton de réinitialisation restaure toutes les valeurs à leurs valeurs par défaut pour une expérimentation facile.

Why Use Générateur de filtres CSS?

Les neuf fonctions de filtre CSS disponibles avec des curseurs visuels
Seuls les filtres actifs sont inclus dans le code CSS généré pour un code propre
La prévisualisation en temps réel montre l'effet combiné de tous les filtres actifs
La réinitialisation en un clic restaure toutes les valeurs par défaut pour une expérimentation facile

Common Use Cases

Effets d'image

Appliquez des filtres similaires à Instagram aux images avec le seul CSS.

Améliorations de survol

Créez des effets interactifs de survol avec des changements de luminosité et de contraste.

États désactivés

Utilisez les nuances de gris et l'opacité pour indiquer les éléments désactivés ou inactifs.

Traitements de fond

Appliquez le flou et la luminosité aux images de fond pour améliorer la lisibilité du texte superposé.

Technical Guide

La propriété filter CSS accepte une ou plusieurs fonctions de filtre séparées par des espaces. Chaque fonction prend une valeur spécifique : blur() accepte des pixels, brightness() et contrast() acceptent des pourcentages (100 % est normal), grayscale() convertit en gris (0-100 %), hue-rotate() décale le spectre de couleurs (0-360deg), invert() inverse les couleurs (0-100 %), opacity() contrôle la transparence (0-100 %), saturate() ajuste l'intensité des couleurs (100 % est normal) et sepia() applique une teinte chaude (0-100 %). Plusieurs filtres sont appliqués dans l'ordre - la séquence peut affecter le résultat final. Pour les performances, filter déclenche un nouveau contexte d'empilement et peut provoquer un repeint. Utilisez will-change: filter lors de l'animation. La fonction de filtre drop-shadow() est une alternative à box-shadow qui suit le canal alpha de l'élément, ce qui convient bien aux PNG et SVG transparents.

Tips & Best Practices

1
Gardez la luminosité et le contraste proches de 100 % pour des effets subtils et naturels
2
Combinez les nuances de gris avec le survol pour créer une interaction de révélation de couleur
3
Utilisez hue-rotate pour des variations rapides de schéma de couleurs
4
Appliquez le flou aux images de fond derrière le texte pour améliorer la lisibilité

Related Tools

Générateur de dégradés CSS

Créez des dégradés linéaires, radiaux et coniques CSS magnifiques avec plusieurs arrêts de couleur et contrôle d'angle.

🎨 CSS & Design

Zone de jeu des transformations CSS

Expérimentez avec les transformations CSS, y compris la rotation, l'échelle, la déformation et la translation avec une perspective 3D.

🎨 CSS & Design

Générateur d'animations CSS

Créez des animations de trames clés CSS avec des effets prédéfinis et une temporisation personnalisable.

🎨 CSS & Design

Générateur de transitions CSS

Gérez les transitions CSS avec des propriétés, durées, effets d'assouplissement et effets au survol personnalisables.

🎨 CSS & Design

Frequently Asked Questions

Q L'ordre des filtres a-t-il une importance ?

Oui, les filtres sont appliqués dans l'ordre. Par exemple, appliquer les nuances de gris avant le sépia donne un résultat différent que l'inverse.

Q Puis-je animer les filtres CSS ?

Oui, les filtres CSS prennent en charge les transitions et les animations. Cependant, les animations de filtres complexes peuvent être gourmandes en performances.

Q Les filtres affectent-ils les éléments enfants ?

Oui, les filtres CSS s'appliquent à l'élément entier et à tous ses descendants. Utilisez backdrop-filter pour n'affecter que la zone derrière un élément.

Q Quel est l'impact sur les performances des filtres CSS ?

Les filtres déclenchent le compostage GPU et peuvent provoquer une réimpression. Utilisez-les avec parcimonie sur les grands éléments et pendant les animations.

Q Puis-je utiliser des filtres sur du texte ?

Oui, la propriété de filtre s'applique à n'importe quel élément, y compris le texte. Cependant, le flou sur le texte le rend illisible - utilisez-le uniquement pour les fins décoratives.

About This Tool

Générateur de filtres CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.