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 attribute indicates what color to use at a gradient stop.
Note:
With respect to gradients, SVG treats the transparent keyword differently than CSS. SVG does not calculate gradients in pre-multiplied space, so transparent really means transparent black. So, specifying a stop-color with the value transparent is equivalent to specifying a stop-color with the value black and a stop-opacity with the value 0.
Note:
As a presentation attribute, stop-color can be used as a CSS property.
You can use this attribute with the following SVG elements:
Usage notes
| Value |
currentcolor |
<color>
<icccolor>
|
|---|---|
| Default value | black |
| Animatable | Yes |
currentcolor-
This keyword denotes the current fill color and can be specified in the same manner as within a
<paint>specification for thefillandstrokeattributes. <color>-
This value indicates a color value.
<icccolor>-
This value refers to an ICC color profile.
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StopColorProperty |
Browser compatibility
BCD tables only load in the browser