Dégradés : linéaires et radiaux
Créez des transitions de couleur fluides avec linear-gradient() et radial-gradient().
Dégradés : linéaires et radiaux est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce qu’un dégradé CSS ?
Les dégradés CSS sont des images générées qui ne nécessitent aucun fichier image et effectuent une transition entre au moins deux couleurs. Ils sont spécifiés comme valeurs de background-image ou de la notation abrégée background.
Principes de base de linear-gradient()
Un dégradé linéaire effectue une transition entre les couleurs le long d’une ligne droite. Le premier argument définit la direction, suivi des points d’arrêt de couleur.
<div class="gradient-demo"></div>
Direction du dégradé : mots-clés et angles
La direction peut être définie avec des mots-clés ou des angles exprimés en degrés :
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
Plusieurs points d’arrêt de couleur
Ajoutez autant de points d’arrêt de couleur que nécessaire. Chaque point peut éventuellement définir une position, exprimée en longueur ou en pourcentage.
<div class="stops"></div>
Points d’arrêt nets
Définissez deux points d’arrêt à la même position pour créer un arrêt net : le changement de couleur est abrupt et ne comporte aucun fondu.
<div class="hard-stop"></div>
Dégradé linéaire répétitif
repeating-linear-gradient() répète le motif du dégradé pour créer des rayures et des textures.
<div class="stripes"></div>
Principes de base de radial-gradient()
Un dégradé radial rayonne depuis un point central selon une forme elliptique ou circulaire.
<div class="radial-demo"></div>
Forme et taille du dégradé radial
Contrôlez la forme du dégradé (circle ou ellipse) ainsi que le mot-clé définissant son étendue :
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
Position du dégradé radial
Utilisez at <position> après la forme et la taille pour déplacer le centre du dégradé radial.
<div class="radial-position"></div>
Dégradé conique
conic-gradient() fait pivoter les couleurs autour d’un point central, comme dans un diagramme circulaire. Il nécessite l’angle de départ from et accepte une position at facultative.
<div class="conic-demo"></div>
Transparence des dégradés
Utilisez transparent ou rgba() dans les points d’arrêt d’un dégradé pour créer un fondu progressif depuis ou vers la couleur d’arrière-plan d’un élément.
<div class="fade-overlay"></div>
Vérification rapide
Quelle fonction CSS génère un dégradé qui rayonne depuis un point central ?
Récapitulatif
Les dégradés linéaires suivent une ligne, les dégradés radiaux rayonnent depuis un point et les dégradés coniques tournent autour d’un point. Utilisez des arrêts nets pour créer des rayures. Toutes les fonctions de dégradé sont des valeurs de background-image et génèrent des images sans fichiers externes.
Questions Fréquemment Posées
La leçon « Dégradés : linéaires et radiaux » est-elle gratuite ?
Oui — le texte complet de « Dégradés : linéaires et radiaux » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Dégradés : linéaires et radiaux » ?
Créez des transitions de couleur fluides avec linear-gradient() et radial-gradient(). Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Dégradés : linéaires et radiaux » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Valeurs de couleur : nommées, hexadécimales, RGB, HSL
- Couleur et image d’arrière-plan
- Dégradés : linéaires et radiaux
- Opacité et transparence RGBA