Catégorie: Développement
Générateur de filtres CSS
Construisez une déclaration de filtre CSS avec des curseurs en temps réel
Ajustez le flou, la luminosité, le contraste, les niveaux de gris, la rotation de teinte, l'inversion, l'opacité, la saturation et le sépia avec des curseurs, prévisualisez l'effet combiné en direct, et copiez la déclaration CSS filter résultante.
filter: none;
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
La propriété CSS filter applique des effets graphiques comme le flou et l'ajustement des couleurs directement dans le navigateur, sans modifier l'image source. Combiner plusieurs fonctions dans une seule déclaration est fastidieux à écrire à la main — cet outil construit la chaîne pour vous à mesure que vous ajustez chaque effet, et n'inclut que les fonctions que vous avez réellement modifiées.
Mode d'emploi
- Faites glisser les curseurs pour ajuster chaque fonction de filtre.
- Observez la mise à jour en direct de l'aperçu.
- Copiez la déclaration filter générée dans votre feuille de style.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Puis-je appliquer ceci à une image de fond plutôt qu'à un élément ?
- Oui — filter fonctionne sur n'importe quel élément, y compris ceux ayant un background-image. Pour ne flouter que l'arrière-plan derrière un élément (et non son contenu), utilisez plutôt backdrop-filter.
- filter affecte-t-il les performances ?
- Des filtres complexes ou animés, en particulier le flou, peuvent être coûteux à afficher sur de grandes surfaces. Testez sur les appareils réellement visés avant de publier un filtre animé.
- Pourquoi l'ordre des fonctions de filtre compte-t-il ?
- Chaque fonction s'applique au résultat de la précédente, donc grayscale(100%) sepia(50%) peut donner un rendu différent de l'ordre inverse. Cet outil les applique dans un ordre fixe et logique.