W3cubDocs

/SVG

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

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 143–11 1.0

See also

© 2005–2023 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