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 April 2017.

The stop-opacity CSS property defines the opacity of a given color gradient stop in the SVG 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 's color but can not make the color defined by the stop-color property more opaque.

Note: The stop-opacity property only applies to elements nested in an . It doesn't apply to other SVG, HTML, or pseudo-elements.

Syntax

css

/* 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 is a or denoting the opacity of the SVG gradient element.

: A numeric value between 0 and 1, inclusive.
: A percentage value between 0% and 100%, 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	elements in
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

stop-opacity = 
        |

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 stars and three elements: each has three 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.

html

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.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
  background: repeating-linear-gradient(
    to top left,
    white 0 9px,
    black 9px 10px
  );
}

css

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 elements in the linear gradient, we could have instead used a single with fully opaque stops, and set a value for each s fill-opacity property instead.

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # StopOpacityProperty