stop-opacity

The stop-opacity attribute defines the opacity of a given color gradient stop.

The opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of the stop-color attribute. For stop-color values that don't include explicit opacity information, the opacity is treated as 1.

Note: As a presentation attribute, stop-opacity can be used as a CSS property.

You can use this attribute with the following SVG elements:

Usage notes

Value <opacity-value>
Default value 1
Animatable Yes
<opacity-value>

This value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color gradient stop.

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'stop-opacity' in that specification.
Candidate Recommendation Refers to the definition in CSS Colors 3, but allows percentage values.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'stop-opacity' in that specification.
Recommendation Initial definition

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
stop-opacity
1
12
1.5
9
9
3
3
18
4
Yes
14
3-11
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stop-opacity