CSS opacity Property

The opacity property defines the transparency of an element.

It specifies how much of the background is visible through the element.

Opacity values range from 0 (transparent) to 1 (opaque).

Example

#

A transparent image with an opacity value of 0.5.

<div>
  <img style="opacity: 0.5;"
       src="/img/css/cardplayers.jpg" />
</div>
Note: Opacity controls the transparency of an element and its children.
If you want opacity for the background only, use an RGBA color instead.

Using opacity

Valid opacity values range from 0 - 1, or 0% - 100%.

A value of 0 makes the element transparent (i.e. invisible).

A value of 0.5 makes it see-through.

And a value of 1 displays the element normal.

Syntax

opacity: number | initial | inherit;

Values

#

Value Description
number Sets opacity from 0 - 1, or 0% - 100%.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

This element and its children have an opacity of 20%.

Displays the div element and its children with 20% opacity

<div style="opacity: 20%">

  <img src="/img/css/cardplayers.jpg" />
  <p>
    Displays the div element and
    its children with 20% opacity
  </p>

</div>

Using RGBA color to set the background color and opacity.

A background color with 10% opacity
A background color with 50% opacity
A background color with 90% opacity
<style>
  .bg-1 { background: rgba(70, 130, 180, 0.1); padding: 25px; }
  .bg-2 { background: rgba(70, 130, 180, 0.5); padding: 25px; }
  .bg-3 { background: rgba(70, 130, 180, 0.9); padding: 25px; }
</style>

<div class="bg-1">
  A background color with 10% opacity
</div>
<div class="bg-2">
  A background color with 50% opacity
</div>
<div class="bg-3">
  A background color with 90% opacity
</div>

Setting an element's opacity with JavaScript.

Select a dropdown value to change the image opacity.

<img src="/img/css/cardplayers.jpg" 
     id="image-opacity">
<p>Select a dropdown value
   to change the image opacity.
</p>

<select onchange="setOpacity(this.value);">
  <option selected="selected" value="1">100%</option>
  <option value="0.8">80%</option>
  <option value="0.5">50%</option>
  <option value="0.3">30%</option>
  <option value="0">0%</option>
</select>

<script>  
  let setOpacity = opacity => {
    document.getElementById("image-opacity")
            .style.opacity = opacity;
  }
</script>

Did you know?

Did you know?

Opacity is animatable

Hovering over the image will transition opacity from 20% to 100%.

<style>
  .transition-img {
    opacity: 0.2;
    transition: 0.5s ease;
  }

  .transition-img:hover {
    opacity: 1;
  }
</style>

<div>
  <img src="/img/css/cardplayers.jpg"
       class="transition-img" />
</div>

Browser support

This table shows when opacity support started for each browser.

Chrome
4.0 Jan 2010
Firefox
2.0 Jan 2010
IE/Edge
9.0 Mar 2011
Opera
9.0 Jun 2006
Safari
3.1 Mar 2008

You may also like

Guides