X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS opacity Property

The opacity property sets the level of transparency of an element. Opacity is the opposite of the transparency.

The opacity property is one of the CSS3 properties.

This property allows to make an element fully transparent, default or half-transparent.

The number ranges between 0 and 1. The value of 1 is the default value and makes the element fully opaque. A value of 0 makes the element fully transparent. A value between 0 and 1 gradually makes an element clear.

Negative values are valid.

When adding transparency to the background of an element with the help of opacity property, all of its child elements also become transparent. Use RGBA colors if you do not apply opacity to the child elements.

Initial Value 1.0
Applies to All elements.
Inherited No.
Animatable Yes.
Version CSS3
DOM Syntax object.style.opacity = "0.3";

Syntax

opacity: number | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .example1 {
      background-color: #8ebf42;
      opacity: 0.3;
      filter: Alpha(opacity=50); 
      }
      .example2 {
      background-color: #8ebf42;
      opacity: 1;
      filter: Alpha(opacity=50); 
      }
    </style>
  </head>
  <body>
    <h2>Opacity property example</h2>
    <h3>Opacity level is 0.3;</h3>
    <div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
    <h3>Opacity level is 1;</h3>
    <div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
  </body>
</html>

Another example where the opacity level of the first image is 1.0, the one of the second image is 0.6, and the opacity level of the third image is 0.2:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      img.a{
      opacity: 1;
      filter: alpha(opacity=100); 
      }
      img.b{
      opacity: 0.6;
      filter: alpha(opacity=100); 
      }
      img.c{
      opacity: 0.2;
      filter: alpha(opacity=100); 
      }
    </style>
  </head>
  <body>
    <h2>Opacity property example</h2>
    <h3>Opacity: 1.0;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="a">
    <h3>Opacity: 0.6;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="b">
    <h3>Opacity: 0.2;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="c">
  </body>
</html>

Values

Value Description
number Defines the opacity level. The default value is 1.0.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

4.0+ 12.0+ 2.0+ 3.1+ 10.0+

Practice Your Knowledge

Which statement is incorrect about opacity property?



Do you find this helpful?

Related articles