Cet exemple crée un gradient linéaire à 135deg allant du corail au violet via l’ambre. Utilisez #FF6B6B à 0%, #F59E0B à 50% et #5B21B6 à 100%. Ce sont les couleurs de l’exemple, pas la palette initiale.

Saisissez les trois couleurs et positions

Choisissez Linéaire et l’angle 135. Fixez #FF6B6B à 0 et #5B21B6 à 100, puis ajoutez un point. Remplacez sa couleur par #F59E0B en gardant la position 50. La couleur moyenne automatique n’est qu’un départ : la conserver ne reproduit pas cet exemple. Vérifiez qu’il reste exactement trois lignes.

Comparez la déclaration copiée complète

Résultat attendu : background-image: linear-gradient(135deg, #FF6B6B 0%, #F59E0B 50%, #5B21B6 100%);. L’ordre doit être corail, ambre, violet, quel que soit l’ordre de modification des positions. Déplacer l’ambre à 70% allonge la première transition et réduit la seconde : c’est un autre cas. Comparez d’abord la déclaration à 50% avant d’expérimenter.

Vérifiez la déclaration dans son contexte réel

Gardez un background-color de repli et enregistrez le CSS avant de recharger : les palettes ne sont pas conservées. Testez les navigateurs et dimensions visés. Vérifiez le contraste sur tout le gradient visible, pas en un point ; l’aperçu ne certifie ni accessibilité ni compatibilité.