CSS Opacity / Transparency

CSS Opacity is a property that allows you to control the transparency of an element. It is commonly used to make an element, such as an image or a background, partially transparent.

The opacity property in CSS accepts values between 0 and 1, where 0 represents completely transparent, and 1 represents completely opaque. Values between 0 and 1 create varying degrees of transparency.

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:

opacity 0.2

opacity 0.5

opacity 1 (default)

Example

  opacity: 0.2;
}
img {
  opacity: 0.5;
}
img {
  opacity: 1 (default);
}

You can click on above box to edit the code and run again.

Output

Transparent Hover Effect

A transparent hover effect refers to an interaction on a web page where an element becomes transparent when a user hovers over it with their mouse pointer. This effect is often used in web design to provide visual feedback and enhance the user experience.

.img4{ opacity: 0.5; margin-left:10px; } .img4:hover{ opacity: 1; } .img5{ opacity: 0.5; margin-left:10px; } .img5:hover{ opacity: 1; } .img6{ opacity: 0.5; margin-left:10px; } .img6:hover{ opacity: 1; }

Example

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

You can click on above box to edit the code and run again.

Output

Transparent Boxes

You can set the CSS transparent background for boxes by adding the opacity property to multiple <div> elements.

Example

div {
    background-color: #8842d5;
    padding: 10px;
    opacity: 1 (default);
}

div.first {
    opacity: 0.1;
    padding: 10px;
    filter: alpha(opacity=10);
}

div.second {
    opacity: 0.4;
    padding: 10px;
    filter: alpha(opacity=40);
}

div.third {
    opacity: 0.8;
    padding: 10px;
    filter: alpha(opacity=80);
}

You can click on above box to edit the code and run again.

Output

opacity 0.1

opacity 0.4

opacity 0.8

opacity 1 (default)

Text in Transparent Box

Example

.transparentBox {
         background: url("Images/flowers-ccc.webp") repeat;
         border: 2px solid black;
      }
      .transparentText {
         margin: 30px;
         background-color: #ffffff;
         border: 1px solid black;
         opacity: 0.6;
      }
      .transparentText p {
         margin: 5%;
         font-weight: bolder;
         color: #000000;
         font-size: 20px;
      }
      
      <body>
          <div class="transparentBox">
              <div class="transparentText">
                 <p>This is some random text inside the transparent box</p>
              </div>
          </div>
      </body>

You can click on above box to edit the code and run again.

Output

This is some random text inside the transparent box