opacity() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The opacity() CSS function is used to adjust the transparency level of an element, allowing you to make elements partially or fully transparent. Unlike the opacity property, which directly applies to an element, the opacity() function is often used within other functions, such as hsl() or rgba(), to define transparency in colors. The function accepts a numeric value between 0 and 1, where 0 represents complete transparency (invisible) and 1 represents full opacity (completely visible). Values between 0 and 1 produce varying degrees of translucency.

One important aspect of opacity() is that it can be applied to both div elements and inline content, affecting the element and all of its children. This is different from using background color transparency alone, which only affects the background layer.

Example 1: Using opacity() with a color function

div {
  background-color: rgba(255 0 0 / opacity(0.5));
}

In this example, the background color of the div will appear semi-transparent red.

Example 2: Gradually changing transparency with opacity()

button:hover {
  background-color: hsl(200 80% 50% / opacity(0.7));
}

Here, when a user hovers over a button, its background color becomes slightly transparent.

The opacity() function is particularly useful for creating layered visual effects, transitions, or animations where you want dynamic control over an element’s transparency without affecting the overall layout. It works well in combination with CSS properties like background-color and color to create visually appealing designs.

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

HTML

<div class="container">

  <div class="box full-opacity">100% (Solid)</div>

  <div class="box partial-opacity">50% (Translucent)</div>

  <div class="box low-opacity">10% (Faded)</div>

</div>

CSS

/* Layout styling */

.container {

  display: flex;

  gap: 20px;

  padding: 20px;

  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), 

                    linear-gradient(-45deg, #ccc 25%, transparent 25%);

  background-size: 20px 20px; /* Checkerboard background to show transparency */

}



.box {

  width: 150px;

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #3498db;

  color: white;

  font-weight: bold;

  border-radius: 8px;

}



/* Opacity Filter Examples */

.full-opacity {

  filter: opacity(100%);

}



.partial-opacity {

  filter: opacity(0.5); /* You can use decimals or percentages */

}



.low-opacity {

  filter: opacity(10%);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS opacity() function. Hover over a browser icon to see the version that first introduced support for this CSS function.