CSS stop-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The stop-color property defines the color used at a particular color stop inside an SVG gradient (for example within a element of a or ). It specifies the base RGB (or color) component that the gradient uses at that stop; the gradient engine then interpolates between the colors of adjacent stops to produce the smooth transition across the gradient. Importantly, stop-color controls the color component only — it does not determine the stop’s position along the gradient vector or any spacing behavior.

When rendered, the color produced by a stop is combined with its alpha component and with surrounding stops during interpolation. That alpha component is typically controlled separately, so stop-color is often used together with stop-opacity (or other opacity controls) to produce semi‑transparent gradient effects. The visual result depends on how the gradient interpolation algorithm blends the stop colors and alphas; differences in color spaces or interpolation modes can change how smooth or saturated the transitions appear.

You can set stop-color through SVG presentation attributes or via CSS rules targeted at the element; the normal CSS cascade and specificity rules determine which declarations apply when multiple sources are present. Because it expresses a color, it can also be coordinated with an element’s overall color scheme — for example the gradient stop can reference the element-level color conceptually tied to the color property — allowing designs where gradient accents automatically follow text or theme colors.

From a practical and design standpoint, stop-color is useful for creating subtle shifts, bold banding, or complex multi-stop gradients. It is animatable as a color, so you can transition or animate stop colors to achieve dynamic gradient effects. When designing with multiple stops, consider performance (many animated stops can be costly to render) and perceptual issues (contrast against foreground content and how colors blend across stops), and aim for consistent color-space handling to keep interpolation predictable.

Definition

Initial value: black
Applies to: <stop> elements in <svg>
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.stopColor

Syntax

stop-color = <color>

Values

colorIndicates a color value.
currentColorInherits the current text color from the SVG or parent element.
inheritInherits the stop-color value from its parent element.

Example

HTML

<div class="example">

  <svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" role="img">

    <title id="title">Rectangle filled with CSS-styled gradient stops</title>

    <desc id="desc">Linear gradient with stops styled using CSS stop-color</desc>

    <defs>

      <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">

        <stop class="stop-start" offset="0%"/>

        <stop class="stop-middle" offset="50%"/>

        <stop class="stop-end" offset="100%"/>

      </linearGradient>

    </defs>

    <rect x="10" y="10" width="280" height="100" rx="12" fill="url(#myGradient)" stroke="#333" stroke-width="2"/>

  </svg>

</div>

CSS

.example {
  display: inline-block;
  padding: 12px;
  background: #f7f7f7;
  border-radius: 8px;
}

svg {
  width: 320px;
  height: auto;
  display: block;
}

.stop-start {
  stop-color: #ff7a18; /* orange */
  stop-opacity: 1;
}

.stop-middle {
  stop-color: #ffd200; /* yellow */
  stop-opacity: 1;
}

.stop-end {
  stop-color: #2bff88; /* green */
  stop-opacity: 1;
}

/* Change gradient colors on hover */
.example:hover .stop-start { stop-color: #ff3b3b; }
.example:hover .stop-end   { stop-color: #3b83ff; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS stop-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.