<stop>

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> SVG element defines a color and its position to use on a gradient. This element is always a child of a <linearGradient> or <radialGradient> element.

Example

html
<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

Attributes

offset

This attribute defines where the gradient stop is placed along the gradient vector. Value type: <number>|<percentage>; Default value: 0; Animatable: yes

stop-color

This attribute defines the color of the gradient stop. It can be used as a CSS property. Value type: <color>; Default value: black; Animatable: yes

stop-opacity

This attribute defines the opacity of the gradient stop. It can be used as a CSS property. Value type: <opacity-value>; Default value: 1; Animatable: yes

Usage context

CategoriesGradient element
Permitted contentAny number of the following elements, in any order:
<animate>, <script>, <set>, <style>

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# StopElement

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
offset

Legend

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

Full support
Full support