stop-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The stop-color CSS property defines the color to use for an SVG <stop> element within a gradient. If present, it overrides the element's stop-color attribute.

Note: The stop-color property only applies to <stop> elements nested in an <svg>. It doesn't apply to other SVG, HTML, or pseudo-elements.

Syntax

css
/* <color> values */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentcolor;

/* Global values */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;

Values

<color>

The color of the fill. This can be any valid CSS <color> value.

Formal definition

Initial valueblack
Applies to<stop> elements in <svg>
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

Error: could not find syntax for this item

Examples

Defining the color stops of SVG gradients

This example demonstrates the basic use case of stop-color, and how the CSS stop-color property takes precedence over the stop-color attribute.

HTML

We have an SVG with three <rect> squares and three <linearGradient> elements. Each gradient has four <stop> elements creating gradients that go from black to white and then white to grey; the only difference between them is the id value.

html
<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </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

We include a stroke and stroke-width outlining the rectangle. We define the colors of the first and last stops in each gradient, overriding their stop-color attribute values, using the stop-color property. Various CSS <color> syntaxes are shown.

css
rect {
  stroke: #333;
  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 100% 50%);
  }
  stop:last-of-type {
    stop-color: hsl(20deg 100% 50%);
  }
}

Results

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# StopColorProperty

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stop-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also