Code minimal
.gradient-text {
background: linear-gradient(90deg, #667eea, #f093fb);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
Prévoir un fallback
Le texte doit rester lisible si le clipping n’est pas appliqué. Définissez une couleur de secours avant les propriétés de clipping, ou utilisez @supports pour limiter l’effet aux navigateurs compatibles.
Accessibilité et contraste
Un titre en dégradé traverse plusieurs couleurs. Vérifiez les zones les plus claires et les plus sombres contre le fond. Pour un texte long, préférez une couleur unie accessible : le dégradé fonctionne mieux sur des titres courts.
Bonnes pratiques design
- Utiliser deux ou trois couleurs maximum.
- Éviter les dégradés trop pâles sur fond clair.
- Réserver l’effet aux titres, badges ou chiffres clés.
- Conserver une graisse suffisante pour que le dégradé soit visible.