CSS stop-opacity Property

The stop-opacity CSS property controls the transparency of an individual color stop inside an SVG gradient. It is applied to the elements within gradient definitions (for example, inside or ) and affects how much of that stop's color contributes to the painted gradient at that position. Because it targets a single stop, it lets you shape the visual softness and translucency of a gradient's transitions without changing the stop's hue.

When a gradient is rendered the alpha from the stop's color is combined with the stop-color specification for that stop to produce the final premultiplied color used during compositing. This means adjusting stop-opacity can make a stop appear more washed-out or more solid even if the color itself remains the same, and it changes how that stop blends with neighboring stops and underlying content. Using it in concert with the color at that stop gives fine-grained control over subtle visual effects like soft fades or partially transparent bands.

The effect of stop-opacity is also influenced by any object-level opacity applied to the element that uses the gradient. For example, an overall opacity on the shape painted with the gradient or per-channel properties such as fill-opacity and stroke-opacity will further modulate the ultimately visible transparency—those are applied at the paint/compositing stage and can make a gradient appear more or less transparent as a whole versus altering individual stops. Understanding this layering is important when you need predictable blending results.

stop-opacity is useful for animations and dynamic effects: you can animate it to fade individual stops in or out, creating moving transparency bands or smoothly adjusting a gradient’s strength. It can be set through inline presentation attributes on elements or via CSS rules targeting those stops, and is commonly used together with CSS transitions or keyframe animations to produce time-based changes. In practice, designers often combine subtle changes to both color and stop opacity to achieve polished gradient transitions that remain visually consistent across different backgrounds.