stop-opacity
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-opacity
CSS property defines the opacity of a given color gradient stop in the SVG <stop>
element within an SVG gradient. If present, it overrides the element's stop-opacity
attribute.
The property value impacts the stop-color
's alpha channel; it can increase the transparency of a <stop>
's color but can not make the color defined by the stop-color
property more opaque.
Syntax
/* numeric and percentage values */
stop-opacity: 0.2;
stop-opacity: 20%;
/* Global values */
stop-opacity: inherit;
stop-opacity: initial;
stop-opacity: revert;
stop-opacity: revert-layer;
stop-opacity: unset;
Values
The <opacity-value>
is a <number>
or <percentage>
denoting the opacity of the SVG gradient <stop>
element.
<number>
-
A numeric value between
0
and1
, inclusive. <percentage>
-
A percentage value between
0%
and100%
, inclusive.
With 0
or 0%
set, the stop is fully transparent. With 1
or 100%
set, the element is the full opacity of the stop-color
value, which may or may not be partially opaque.
Formal definition
Initial value | black |
---|---|
Applies to | <stop> elements in <svg> |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Defining the opacity of a SVG gradient color stop
This example demonstrates the basic use case of stop-opacity
, and how the CSS stop-opacity
property takes precedence over the stop-opacity
attribute.
HTML
We have an SVG with a few <polygon>
stars and three <linearGradient>
elements: each has three <stop>
elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the id
value.
<svg viewBox="0 0 250 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient1">
<stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
<stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
<stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
</linearGradient>
<linearGradient id="myGradient2">
<stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
<stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
<stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
</linearGradient>
<linearGradient id="myGradient3">
<stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
<stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
<stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
</linearGradient>
</defs>
<polygon points="40,10 10,100 80,40 0,40 70,100" />
<polygon points="125,10 95,100 165,40 85,40 155,100" />
<polygon points="210,10 180,100 250,40 170,40 240,100" />
</svg>
CSS
We include a stroke
and stroke-width
making the polygon path line visible.
Each polygon
has a gradient background set using the fill
property; the gradient's id
is the url()
parameter. We set magenta
as the fallback color.
We define the opacity of the stops of each gradient using the stop-opacity
property.
The SVG has a striped background to make the transparency settings more apparent.
polygon {
stroke: #333;
stroke-width: 1px;
}
polygon:nth-of-type(1) {
fill: url("#myGradient1") magenta;
}
polygon:nth-of-type(2) {
fill: url("#myGradient2") magenta;
}
polygon:nth-of-type(3) {
fill: url("#myGradient3") magenta;
}
#myGradient1 stop {
stop-opacity: 1;
}
#myGradient2 stop {
stop-opacity: 0.8;
}
#myGradient3 stop {
stop-opacity: 25%;
}
Results
The first star is fully opaque. The fill of the second star is 80% opaque because the color stops are slightly translucent; the stop-opacity: 0.8;
overrode the stop-opacity="1"
element attribute value. The fill of the last star is barely noticeable with color stops that are 25% opaque. Note the stroke is the same opaque dark grey in all cases.
Note: Because we used the same stop-opacity
value for all the sibling <stop>
elements in the linear gradient, we could have instead used a single <linearGradient>
with fully opaque stops, and set a value for each <polygon>
s fill-opacity
property instead.
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StopOpacityProperty |
Browser compatibility
BCD tables only load in the browser
See also
- SVG
stop-opacity
attribute - Presentation properties:
stop-opacity
,clip-rule
,color-interpolation-filters
,fill-opacity
,fill-rule
,fill
,marker-end
,marker-mid
,marker-start
,shape-rendering
,stop-color
,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