opacity() CSS Function

Description

The opacity() CSS function sets the degree of transparency of an image. In its effect, it is similar to the opacity property, but some filter browsers use hardware acceleration to increase their performance.

Syntax

opacity() = opacity(amount)

Values

  • amountThe amount of the conversion, specified as a <number> or a <percentage>. A value of 0% is completely transparent, while a value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 1.

Example

<img class="opacity" src="images/nature.jpg" alt="Opacity Example">
.opacity {
filter: opacity( 50% );
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X?????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
?53???6.0