Dégradé pleine page
body {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
Superposer plusieurs dégradés
CSS permet d’empiler plusieurs images de fond. La première couche est dessinée au-dessus des suivantes.
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 35%),
linear-gradient(135deg, #111827, #4c1d95);
Lisibilité du texte
Un fond esthétique ne suffit pas : le texte posé dessus doit rester lisible. Ajoutez un overlay sombre ou clair si nécessaire, et vérifiez le contraste sur la zone la plus défavorable du dégradé.
Performance
Un dégradé CSS ne charge aucun fichier image. Il est idéal pour les fonds adaptatifs, mais évitez d’animer des dégradés très complexes sur de grands blocs si la performance mobile est critique.