jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Générateur de Filtre CSS

Expérimentez avec les neuf fonctions de filtre CSS – blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia et opacity – avec un éditeur visuel et un aperçu en temps réel. Chaque filtre commence à sa valeur neutre par défaut.

Chargement de l'outil...

Qu'est-ce que Générateur de Filtre CSS ?

Le Générateur de Filtre CSS est un terrain de jeu visuel pour la propriété CSS filter. Au lieu de taper filter: blur(3px) grayscale(50%) à la main, vous ajustez des curseurs pour chaque fonction et voyez le résultat instantanément.

Réponse rapide

Appliquez des filtres CSS (blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, opacity) à un élément d'aperçu ou à une image. Ajustez chaque filtre et copiez la propriété CSS filter.

Last updated: 2026-06-11

Limites

  • La fonction de filtre drop-shadow n'est pas incluse.
  • L'aperçu utilise la propriété CSS filter qui s'applique à tout l'élément.
  • L'aperçu d'image nécessite une URL HTTPS accessible publiquement.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Ajustez les curseurs de filtre : Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Saturate, Sepia et Opacity.
  2. Observez l'aperçu en direct se mettre à jour en temps réel sur un échantillon de dégradé coloré.
  3. Collez facultativement une URL d'image publique pour prévisualiser les filtres sur une vraie photo.
  4. Copiez la propriété CSS filter. Seules les valeurs non par défaut apparaissent dans la sortie.

A quoi il sert

  • Prévisualiser des combinaisons de filtres CSS avant de les appliquer à une galerie d'images.
  • Tester des valeurs de filtre sur une photo de produit pour une animation niveaux de gris vers couleur.
  • Générer rapidement un filtre sépia pour une galerie de photos vintage.

Cas d'usage

Exemples concrets

Exemple

Effet de survol de photo d'équipe

Un développeur crée un effet de survol niveaux de gris vers couleur. Il règle Grayscale à 100% par défaut et prévoit une règle hover avec Grayscale 0%.

Exemple

Amélioration d'image de blog

Un blogueur colle une URL Unsplash et règle Brightness à 115%, Contrast à 110% et Saturate à 120% pour rendre l'image plus vive.

Erreurs frequentes

  • Appliquer grayscale et saturate ensemble sans comprendre l'ordre d'application.
  • Utiliser de grandes valeurs de flou sur des images en pleine largeur.
  • Régler brightness à 0% en espérant le restaurer – brightness(0%) rend un élément complètement noir.

Vérification

  1. Réglez Blur sur 3px et Grayscale sur 50%. Vérifiez que la sortie contient blur(3px) grayscale(50%).
  2. Collez une URL d'image valide. Vérifiez que l'image se charge dans l'aperçu.

FAQ

Questions sur Générateur de Filtre CSS

Les filtres CSS affectent-ils les performances de la page ?

Les filtres CSS sont accélérés par le GPU et fonctionnent bien en général. Cependant, combiner plusieurs filtres avec de grandes valeurs de flou peut ralentir le rendu sur mobile.

Puis-je animer les filtres CSS avec des transitions ou keyframes ?

Oui, les filtres CSS sont des propriétés animables. Utilisez transition: filter 0.3s ease pour les effets de survol.

Pourquoi mon image ne se charge-t-elle pas dans l'aperçu ?

L'URL doit être accessible publiquement et autoriser les requêtes cross-origin. Les chemins de fichiers locaux ne fonctionnent pas.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi