Générateur de dégradés CSS
Dégradés linéaires, radiaux et coniques.
Design
Générateur de filtres CSS
Filtres CSS et effet verre dépoli.
Ce que fait cet outil. Cet outil génère du code de filtres CSS avec aperçu, y compris l'effet verre dépoli via backdrop-filter. Ce sont des effets spectaculaires et parmi les plus coûteux en performance : à employer avec discernement.
Fonctionne dans le navigateurAucun envoiSans inscriptionFonctionne hors ligne
Comment utiliser Générateur de filtres CSS
- Réglez les filtres à combiner.
- Activez l'effet d'arrière-plan pour le verre dépoli.
- Copiez le CSS obtenu.
Les filtres disponibles
Ils s'appliquent avec la propriété filter et s'enchaînent séparés par des espaces.
| Filtre | Effet |
|---|---|
| blur() | flou |
| brightness() | luminosité |
| contrast() | contraste |
| saturate() | saturation |
| grayscale() | niveaux de gris |
| sepia() | teinte sépia |
| hue-rotate() | rotation de la teinte |
| drop-shadow() | ombre épousant la silhouette |
L'ordre compte : les filtres s'appliquent en séquence, donc blur() suivi de contrast() ne donne pas le même résultat que l'inverse.
drop-shadow() mérite une mention à part, parce qu'il fait ce dont box-shadow est incapable : suivre la forme réelle d'un PNG transparent ou d'un SVG plutôt que le rectangle de l'élément.
Un usage pratique et peu connu : combiner un blur() et un contrast() très élevés sur des éléments superposés produit un effet de fusion entre les formes, sans aucune bibliothèque.
Le verre dépoli et ses pièges
L'effet est à la mode et présente deux difficultés connues.
Il s'obtient avec backdrop-filter: blur(), qui floute ce qui se trouve derrière l'élément plutôt que l'élément lui-même, complété par un fond semi-transparent.
Le premier problème est la lisibilité. Le texte sur fond flouté a un contraste imprévisible, puisqu'il dépend de ce qui passe derrière. Un panneau de verre au-dessus d'une image claire puis d'une image sombre donne des résultats opposés.
La solution consiste à ne pas compter sur le flou pour le contraste : ajoutez une couleur de fond semi-transparente suffisamment opaque pour garantir le contraste du texte quoi qu'il y ait derrière.
Le second problème est la performance. backdrop-filter oblige le navigateur à composer et flouter la région située derrière à chaque image, ce qui compte parmi les opérations CSS les plus coûteuses.
Réservez-le à peu d'éléments et à de petites surfaces : une barre de navigation fixe ou une boîte modale, pas une liste de vingt cartes. Sur mobile d'entrée de gamme, la différence est très nette.
Quand ne pas les utiliser
Quelques précautions qui évitent bien des ennuis.
Appliquer un filter crée un nouveau contexte d'empilement et un bloc conteneur pour les descendants en position: fixed. Un élément fixe placé dans un conteneur filtré cesse donc de se comporter comme tel — un bug particulièrement déroutant à diagnostiquer.
Sur de grandes images, appliquer des filtres en CSS impose un traitement à chaque repeint. Si l'effet est permanent, mieux vaut exporter l'image déjà traitée.
Évitez d'animer blur() directement : c'est l'une des animations les plus coûteuses qui soient. S'il faut une transition, animez l'opacité entre deux calques, l'un net et l'autre déjà flouté.
Respectez prefers-reduced-motion pour toute animation de filtre : les effets de flou en mouvement provoquent un malaise chez les personnes sensibles sur le plan vestibulaire.
Et vérifiez systématiquement le rendu en mode sombre. Un verre dépoli calibré sur fond clair devient souvent méconnaissable une fois la palette inversée.
Questions fréquentes
Comment obtenir l'effet verre ?
Avec backdrop-filter: blur() et un fond semi-transparent qui garantit le contraste.
backdrop-filter est-il coûteux ?
Assez. Réservez-le à peu d'éléments et à de petites surfaces, pas à une liste de cartes.
L'ordre des filtres compte-t-il ?
Oui. Ils s'appliquent en séquence, et changer l'ordre change le résultat.
Quelle différence avec box-shadow ?
drop-shadow() suit la silhouette réelle d'un PNG ou d'un SVG ; box-shadow suit le rectangle.
Pourquoi mon élément fixe ne l'est plus ?
Parce qu'un filtre sur un ancêtre crée un bloc conteneur pour position: fixed.
Mes données sont-elles transmises ?
Non.