Skip to main content

CSS Opacity

CSS Opacity / Transparency​

CSS opacity is a property that allows you to set the transparency of an element. The opacity value ranges from 0 to 1, where 0 is completely transparent and 1 is completely opaque.

As an example:

Editor

Loading...

In this example:

  • We have created an image container that has an image and an overlay div.
  • The overlay div is positioned absolutely over the image and has an opacity of 0 by default.
  • When we hover over the image container, we set the opacity of the overlay div to 1, creating the transparent effect.
tip

The opacity property affects the entire element, including its children, so if you want to make only the background of an element transparent while leaving the text or other content opaque, you can use the background-color property with an RGBA value.

As an example:

background-color: rgba(255, 255, 255, 0.5);

Transparency using RGBA​

RGBA stands for Red, Green, Blue, and Alpha. The Alpha channel determines the transparency of a color, where a value of 0 means fully transparent, and a value of 1 means fully opaque.

As an example:

Editor

Loading...

In this example:

  • We've set the background-color of the body element to rgba(255, 0, 0, 0.5), which is a bright red color with 50% transparency.
  • We've also added a white h1 element with centered text to show that the background color is transparent.
info

You can adjust the RGBA values to create different transparent colors. For example, if you wanted a blue-green color with 70% transparency, you could use rgba(0, 128, 128, 0.7).