stop-color
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.
Syntax
/* <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
Formal definition
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.
<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.
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
BCD tables only load in the browser
See also
- SVG
stop-color
attribute - Presentation properties:
stop-color
,clip-rule
,color-interpolation-filters
,fill-opacity
,fill-rule
,fill
,marker-end
,marker-mid
,marker-start
,shape-rendering
,stop-opacity
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,text-anchor
, andvector-effect
opacity
background-color
<color>
<basic-shape>
data type