opacity

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.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css opacity for further information.

Usage context

<opacity-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.

Example

SVG

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" />
</svg>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" opacity="0.25" />
</svg>

Result

Elements

The following elements can use the opacity attribute

• Graphics elements »
• <a>
• <defs>
• <glyph>
• <g>
• <marker>
• <missing-glyph>
• <pattern>
• <svg>
• <switch>
• <symbol>

Browser compatibilityUpdate compatibility data on GitHub

See also

• css opacity