<stop>

Baseline Widely available

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

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.

Usage context

Categories	Gradient element
Permitted content	Any number of the following elements, in any order: `<animate>`,`<script>`,`<set>`,`<style>`

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

DOM Interface

This element implements theSVGStopElement interface.

Example

html,body,svg {  height: 100%;}

html

<svg  viewBox="0 0 10 10"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>    <linearGradient 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>