opacity() CSS Function

Description

The CSS opacity() function applies transparency to the samples in an image. It takes a single argument, which is the amount of transparency to apply. This argument can be a number or a percentage, with a value of 0% being completely transparent and a value of 100% being completely opaque. Values between 0% and 100% are linear multipliers on the effect.

The opacity() function can be used to create a variety of effects, such as:

• Making an image partially transparent, so that the content behind it is visible.
• Creating a fade-in or fade-out effect for an element.
• Creating a hover effect that changes the transparency of an element when the user hovers over it.
• Creating a layered effect, where different elements are stacked on top of each other and have different opacities.

The following example shows how to use the opacity() function to make an image 50% transparent:

img {
  opacity: 0.5;
}

This will make the image half as opaque as it would be normally.

The following example shows how to use the opacity() function to create a fade-in effect for an element:

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in.active {
  opacity: 1;
}

This will set the opacity of the element with the class fade-in to 0 initially. When the class active is added to the element, the opacity will transition to 1 over a period of 0.5 seconds.

The opacity() function is a useful function that can be used to create a variety of effects on your web pages.

Syntax

opacity() = opacity(amount)

Values

• amountThe amount of the conversion, specified as a <number> or a <percentage>. A value of 0% is completely transparent, while a value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 1.

Example

<img class="opacity" src="images/nature.jpg" alt="Opacity Example">

.opacity {

   filter: opacity( 50% );

}

Browser Support

The following table will show you the current browser support for the CSS opacity() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023