À propos de cet outil
Ce générateur contrôle le flou, la luminosité, le contraste, les niveaux de gris, la rotation de teinte, l'inversion, l'opacité, la saturation et le sépia. L'aperçu utilise les éléments intégrés à la page, sans charger d'image distante.
Mode d'emploi
- Déplacez les curseurs ou saisissez des valeurs pour régler les filtres.
- Observez les changements de couleur, de contours et d'opacité en direct.
- Copiez la déclaration filter générée.
- Cliquez sur « Réinitialiser » pour retrouver toutes les valeurs par défaut et obtenir filter: none.
Exemples
- grayscale(100%) produit une image entièrement en niveaux de gris.
- brightness(120%) augmente la luminosité ; brightness(100%) la conserve.
- blur(2px) adoucit les contours ; opacity(50%) rend l'élément semi-transparent.
filter: blur(2px) brightness(120%) contrast(110%) saturate(130%);
filter: none;Fonctionnement et explications CSS
CSS filter applique les effets à l'élément rendu dans l'ordre indiqué. Les valeurs par défaut sont blur 0px, brightness 100%, contrast 100%, grayscale 0%, hue-rotate 0deg, invert 0%, opacity 100%, saturate 100% et sepia 0%. Les fonctions à leur valeur par défaut peuvent être omises ; si elles le sont toutes, le résultat est none.
Utilisations courantes
- Comparer les effets de filtre sur des cartes, illustrations ou images.
- Préparer le CSS des effets au survol et des thèmes.
- Comprendre le résultat de plusieurs fonctions filter combinées.
Confidentialité
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
FAQ
Qu'est-ce que CSS filter ?
C'est une propriété d'effets visuels permettant au navigateur de modifier le flou, la luminosité, les couleurs et l'opacité d'un élément.
Que signifie brightness(100%) ?
La luminosité reste inchangée. Une valeur inférieure à 100% assombrit l'élément ; une valeur supérieure l'éclaircit.
Comment utiliser blur() et opacity() ?
blur() utilise une longueur positive ou nulle. opacity() règle l'opacité de 0 à 100%, 100% correspondant à un élément entièrement opaque.
CSS filter modifie-t-il l'image d'origine ?
Non. Il change uniquement l'affichage dans le navigateur, sans écrire dans le fichier image ni le modifier.
Pourquoi la réinitialisation produit-elle filter: none ?
Lorsque tous les réglages reviennent aux valeurs sans effet, none décrit entièrement le résultat sans énumérer chaque fonction par défaut.