CSS opacity() Function

Use the opacity() function to make an image partially, or completely, transparent.

The CSS opacity() function is used with the filter property to apply transparency to the samples in an image.

The opacity() function requires an argument to be passed to it. This argument determines the proportion of the transparency that's applied to the image. The argument can be either a percentage value or a number.

Using Percentages

Here's an example using a percentage value to make an image partially transparent:

<style>
  img {
    filter: opacity(70%);
  }
  body {
    background: url(/pix/samples/bubble2.gif);
  }
</style>

<img src="/pix/samples/13m.jpg" alt="Sample image">

Using Numbers

Here's an example using a number:

<style>
  img {
    filter: opacity(0.5);
  }
  body {
    background: url(/pix/samples/bubble1.gif);
  }
</style>

<img src="/pix/samples/9m.jpg" alt="Sample image">

Official Syntax

The official syntax of the opacity() function is as follows:

Possible Values

The opacity() function accepts a percentage or number as its argument. This argument determines the proportion of the conversion.

A value of 100% results in an image that's completely opaque (i.e. it's unchanged). A value of 0% results in an image that's completely transparent (i.e. you can't see it). Values between 0% and 100% are linear multipliers on the effect.

The specification allows amounts over 100%, but this will have no further effect on the image (i.e. the user agent will clamp it to 1).

A number value of 0.5 has the same effect as the percentage value 50%. A value of 1 is the same as 100%.

Negative values are not allowed.

The `opacity()` Function vs `opacity` Property

You might also be aware that there's an opacity property, which does a similar thing to the opacity function. However, there's a subtle difference between the two.

Here's what the specification says about this:

The opacity filter function is not meant to be a shorthand of the opacity property. Furthermore, it allows setting the transparency of intermediate filter primitive results before passing to the next filter primitive. If the opacity filter function is set as last filter primitive, the value of the opacity property is multiplied on top of the value of the filter function, which may result in a more transparent content.

CSS Specifications

The opacity() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.