stop-color

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.

La propriété CSS stop-color définit la couleur à utiliser pour un élément SVG <stop> dans un dégradé. Si elle est présente, elle remplace l'attribut stop-color de l'élément.

Note : La propriété stop-color ne s'applique qu'aux éléments <stop> imbriqués dans un <svg>. Elle ne s'applique pas aux autres éléments SVG, HTML ou pseudo-éléments.

Syntaxe

css

/* Valeurs de type <color> */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentColor;

/* Valeurs globales */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;

Valeurs

<color>: La couleur du remplissage. Cela peut être n'importe quelle valeur CSS <color> valide.

Définition formelle

Valeur initiale	`black`
Applicabilité	éléments `<stop>` dans `<svg>`
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

stop-color = 
  <color>

Exemples

Définir les arrêts de couleur des dégradés SVG

Cet exemple montre l'utilisation de base de stop-color et comment la propriété CSS stop-color prend le pas sur l'attribut stop-color.

HTML

Nous avons un SVG avec trois <rect> carrés et trois <linearGradient> éléments. Chaque dégradé a quatre <stop> éléments créant des dégradés allant du noir au blanc puis du blanc au gris ; la seule différence entre eux est la valeur de l'id.

html

<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <stop offset="25%" stop-color="black" />
      <stop offset="40%" stop-color="white" />
      <stop offset="60%" stop-color="white" />
      <stop offset="75%" stop-color="#333333" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="25%" stop-color="black" />
      <stop offset="40%" stop-color="white" />
      <stop offset="60%" stop-color="white" />
      <stop offset="75%" stop-color="#333333" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="25%" stop-color="black" />
      <stop offset="40%" stop-color="white" />
      <stop offset="60%" stop-color="white" />
      <stop offset="75%" stop-color="#333333" />
    </linearGradient>
  </defs>
  <rect x="2" y="10" width="80" height="80" fill="url('#myGradient1')" />
  <rect x="92" y="10" width="80" height="80" fill="url('#myGradient2')" />
  <rect x="182" y="10" width="80" height="80" fill="url('#myGradient3')" />
</svg>

CSS

Nous incluons un contour (stroke) et une largeur de contour (stroke-width) pour délimiter le rectangle. Nous définissons les couleurs des premiers et derniers arrêts de chaque dégradé, en remplaçant leurs valeurs d'attribut stop-color, en utilisant la propriété stop-color. Différentes syntaxes CSS <color> sont présentées.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

rect {
  stroke: #333333;
  stroke-width: 1px;
}

#myGradient1 {
  stop:first-of-type {
    stop-color: #66ccff;
  }
  stop:last-of-type {
    stop-color: #f4aab9;
  }
}
#myGradient2 {
  stop:first-of-type {
    stop-color: yellow;
  }
  stop:last-of-type {
    stop-color: purple;
  }
}
#myGradient3 {
  stop:first-of-type {
    stop-color: hsl(0deg 90% 50%);
  }
  stop:last-of-type {
    stop-color: hsl(20deg 60% 50%);
  }
}

Résultats

Spécifications

Spécification
Scalable Vector Graphics (SVG) 2 # StopColorProperty

Compatibilité des navigateurs

Voir aussi

L'attribut SVG stop-color
Les propriétés de présentation : stop-color, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor et vector-effect
La propriété opacity
La propriété background-color
Le type de donnée <color>
Le type de donnée <basic-shape>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 24 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu