Docs CSS exécutables : Dégradé CSS

Q: Comment faire un dégradé radial en CSS ?

Utilisez background-image: radial-gradient(#93c5fd, #1e3a8a);. Ajoutez une forme et une position avant les couleurs, par exemple radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: Quelle est la différence entre circle et ellipse dans radial-gradient ?

ellipse (par défaut) s'étire selon les proportions de la boîte, donc elle est large dans une boîte large. circle garde le dégradé rond, quelle que soit la forme de la boîte.

Q: Comment définir la direction d'un dégradé linéaire ?

Placez une direction ou un angle en premier : linear-gradient(to right, red, blue) ou linear-gradient(45deg, red, blue). La valeur par défaut est to bottom (180deg) ; 0deg pointe vers le haut et les angles tournent dans le sens des aiguilles d'une montre.

Q: Comment faire des rayures nettes au lieu d'un fondu ?

Donnez la même position d'arrêt à deux couleurs : linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) change de couleur au milieu sans transition. repeating-linear-gradient répète un motif de ces arrêts.

Q: Peut-on utiliser un dégradé dans background-color ?

Non. Un dégradé est une image, il va donc dans background-image ou dans le raccourci background. background-color: linear-gradient(...) est invalide et ignoré.

Dégradés radiaux

radial-gradient() fond les couleurs vers l'extérieur à partir d'un point central. Comme tout dégradé CSS, c'est une image, qui va donc dans background-image (ou dans le raccourci background) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

La syntaxe complète est radial-gradient(shape size at position, color stops). Tout ce qui précède les couleurs est facultatif.

Partie	Valeurs	Par défaut
Forme	`circle`, `ellipse`	`ellipse`
Taille	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, ou des longueurs	`farthest-corner`
Position	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Arrêts de couleur	Deux couleurs ou plus, chacune avec une position facultative

Le mot-clé de taille décide où la dernière couleur est atteinte : au côté le plus proche de la boîte, au coin le plus éloigné, et ainsi de suite. Changez les valeurs ici et regardez le dégradé se redessiner :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a et circle 40px, #f59e0b 99%, transparent (un point aux bords nets).

Dégradés linéaires

linear-gradient() fond les couleurs le long d'une ligne droite. Placez une direction ou un angle en premier, puis les couleurs :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Les angles partent de 0deg vers le haut et tournent dans le sens des aiguilles d'une montre, donc 90deg correspond à to right et 180deg à la valeur par défaut to bottom. to right reste physique sur les pages de droite à gauche ; inversez-le vous-même si le dégradé doit suivre le sens de lecture.

Arrêts de couleur et arrêts nets

Chaque couleur peut avoir une position. Sans positions, les couleurs sont réparties uniformément. Quand deux couleurs partagent une position, le changement est instantané : c'est ainsi que l'on dessine des rayures, des drapeaux et des barres de progression.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Un arrêt peut aussi prendre deux positions, #111827 12px 24px, ce qui dessine une bande unie de 12px à 24px.

Dégradés coniques

conic-gradient() fait tourner les couleurs autour d'un point central, comme les aiguilles d'une horloge. Avec des arrêts nets, il dessine un diagramme circulaire sans image ni JavaScript :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Un graphique dessiné en CSS est invisible pour les lecteurs d'écran, écrivez donc aussi les chiffres en texte.

Texte en dégradé

Découpez un fond en dégradé selon les lettres et rendez le texte lui-même transparent :

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Pensez à une couleur color de secours : si le découpage échoue, le texte disparaît. Le texte en dégradé a aussi un contraste inégal, réservez-le donc aux grands titres.

Les dégradés s'empilent avec des images et d'autres dégradés dans une même liste background-image ; la page image de fond traite des couches, de la taille et de la position.

Erreurs courantes

background-color: linear-gradient(...). Un dégradé est une image : utilisez background-image ou background.
Des degrés dans le mauvais sens. 0deg pointe vers le haut, pas vers la droite. 90deg va vers la droite.
Un dégradé sur un élément sans hauteur. Rien ne s'affiche ; donnez-lui du contenu ou une taille.
Des couleurs intermédiaires ternes. Fondre deux couleurs saturées opposées, comme le rouge et le vert, passe par un gris-brun en sRGB. Ajoutez un arrêt intermédiaire, ou fondez dans un autre espace colorimétrique : linear-gradient(in oklch, red, green).
Des effets de paliers sur les grands dégradés subtils. Des couleurs très proches sur une grande surface laissent voir des marches ; un peu plus de contraste entre les arrêts aide.

Questions fréquentes

Comment faire un dégradé radial en CSS ?

Utilisez background-image: radial-gradient(#93c5fd, #1e3a8a);. Ajoutez une forme et une position avant les couleurs, par exemple radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Quelle est la différence entre circle et ellipse dans radial-gradient ?

ellipse (par défaut) s'étire selon les proportions de la boîte, donc elle est large dans une boîte large. circle garde le dégradé rond, quelle que soit la forme de la boîte.

Comment définir la direction d'un dégradé linéaire ?

Placez une direction ou un angle en premier : linear-gradient(to right, red, blue) ou linear-gradient(45deg, red, blue). La valeur par défaut est to bottom (180deg) ; 0deg pointe vers le haut et les angles tournent dans le sens des aiguilles d'une montre.

Comment faire des rayures nettes au lieu d'un fondu ?

Donnez la même position d'arrêt à deux couleurs : linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) change de couleur au milieu sans transition. repeating-linear-gradient répète un motif de ces arrêts.

Peut-on utiliser un dégradé dans background-color ?

Non. Un dégradé est une image, il va donc dans background-image ou dans le raccourci background. background-color: linear-gradient(...) est invalide et ignoré.

Concepts liés