Dégradés CSS
Couleurs unies et photos couvrent beaucoup d’arrière-plans. Parfois vous voulez un fondu doux entre couleurs — bannière calme, carte lumineuse, ciel sans gros fichier. Ce fondu est un dégradé, dessiné par CSS comme un type spécial de background-image.
Qu’est-ce qu’un dégradé CSS ?
Un dégradé est une image que le navigateur génère — pas un JPG à télécharger. Vous le décrivez avec des fonctions comme linear-gradient() et radial-gradient(), puis vous le mettez dans background-image (ou le raccourci background). Le résultat se peint derrière le contenu comme un fond photo.
Types en un coup d’œil
Commencez par ces deux. Les coniques peuvent attendre.
📊 Types de dégradé CSS du quotidien
| Type | Fonction | Usage quotidien |
|---|---|---|
| Linéaire | linear-gradient(…) |
Bannières, boutons, lavages de section gauche→droite ou haut→bas |
| Radial | radial-gradient(…) |
Cartes spotlight douces, fondus circulaires depuis le centre |
| Mots de direction | to right, to bottom |
Direction linéaire lisible sans angles |
| Angle | 45deg, 90deg |
Inclinaison précise quand les mots ne suffisent pas |
| Arrêts de couleur | teal 0%, navy 100% |
Où chaque couleur se place sur le fondu |
Linéaire : deux couleurs, gauche vers droite
Le linéaire le plus simple a besoin d’une direction et d’au moins deux couleurs. CSS fond entre elles.
Dégradé linéaire simple gauche→droite
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}Lire la fonction
to right est la direction. #0f766e commence ; #0f172a finit. Le navigateur remplit l’entre-deux.
Angles et plus d’arrêts
Utilisez un angle pour un lavage diagonal, et des arrêts intermédiaires pour un fondu plus riche.
Linéaire en angle avec trois arrêts
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}Habitude d’arrêt
Un arrêt de couleur dit « cette couleur ici ». Les pourcentages se lisent facilement. Vous pouvez omettre les positions : le navigateur espace également.
Radial : fondu depuis le centre
radial-gradient() s’étend depuis un centre — utile pour cartes douces et lueurs de focus.
Carte radiale douce
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}Astuce cercle
circle at center garde la forme ronde et centrée. Plus tard at top ou at 20% 30% pour un projecteur ailleurs.
Les dégradés vivent sur background-image
Ne mettez pas une fonction dégradé dans color — cela peint le texte. Les dégradés sont des images d’arrière-plan ; le contraste du texte compte encore.
Raccourci avec couleur de secours
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}Essayez vous-même
.banneraveclinear-gradient(to right, #0f766e, #0f172a)et texte clair.- Direction
to bottom— l’axe du fondu bascule. .heroavec135deget trois arrêts (teal → milieu → navy)..cardavecradial-gradient(circle at center, #ccfbf1, #0f766e).- Optionnel : couleur unie de secours avant le dégradé dans le raccourci
background.
Erreurs fréquentes
- Écrire
color: linear-gradient(…)— le dégradé n’est pas une couleur de texte - Un seul arrêt de couleur — il faut au moins deux couleurs pour fondre
- Oublier que c’est un
background-image(contraste et empilement restent valables) - Arc-en-ciel bruyant sur chaque section — des lavages doux à deux ou trois arrêts paraissent plus pro
- Attendre qu’un dégradé remplace des photos porteuses de sens (produits restent de vraies images)
En bref
- Les dégradés sont des images générées pour les arrière-plans
linear-gradient()fond le long d’une ligne ;radial-gradient()depuis un centre- Mots de direction, angles et arrêts contrôlent l’apparence
- Branchez-les avec
background-imageou le raccourcibackground - Gardez un fort contraste de texte par-dessus
- Pratiquez une bannière linéaire et une carte radiale avant les astuces lourdes
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut