opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

Note: As a presentation attribute, opacity can be used as a CSS property. See the CSS opacity property for more information.

You can use this attribute with the following SVG elements:

Unlike fill-opacity, stroke-opacity, and stop-opacity, which are applied to individual operations and are rendered when the element is rendered, opacity is applied to whole objects or groups, and is more like a post-processing operation on the rendered image of the object or group. Therefore, when you have both opacity and the other opacity attributes in the same area, they will be overlaid on top of each other and cause the opacity to be multiplied.

Example

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" style="stop-color:skyblue;" />
      <stop offset="100%" style="stop-color:seagreen;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>

Usage notes

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

The uniform opacity setting to be applied across an entire object, as a <number>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

Specifications

Specification
CSS Color Module Level 4
# propdef-opacity
Scalable Vector Graphics (SVG) 2
# ObjectAndGroupOpacityProperties

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
opacity

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also