CSS opacity() Function

CSS opacity() Function

The CSS opacity() function is a filter function that adjusts the transparency of an element's rendered appearance.

It is used with the filter property to make images, text, backgrounds, and other rendered content appear more or less transparent. The function accepts a number or percentage and can be combined with other CSS filter functions to create visual effects.

Syntax

filter: opacity(amount);

The opacity() function accepts one optional argument representing the amount of opacity to retain.

For example:

filter: opacity(1);
filter: opacity(0.5);
filter: opacity(50%);
filter: opacity(0);

A value of 1 or 100% preserves full opacity. A value of 0 or 0% makes the filtered rendering fully transparent.

The argument can be omitted:

filter: opacity();

When omitted, the function uses a default value of 1, producing no change in opacity.

The function is used as a value of the filter property. It is not a standalone CSS property.

Parameters

The opacity() function accepts one optional number or percentage.

Common values include:

Negative values are invalid. Values greater than 1 or 100% are accepted but clamped to full opacity for the filter's effect.

The argument must be a valid number or percentage. Length and angle units are not accepted.

How It Works

The opacity() function multiplies the alpha values of the rendered image by the specified amount.

For example:

.box {
  filter: opacity(0.5);
}

The rendered box and its contents appear at half their original opacity.

Another example:

.box {
  filter: opacity(0.25);
}

The rendered result retains 25% of its original opacity.

Existing transparency is also affected. If part of an image already has an alpha value of 0.5, applying opacity(0.5) reduces that part's alpha to 0.25.

The function affects the rendered appearance rather than changing the element's layout dimensions.

Surrounding elements continue to occupy their normal positions, and filtered elements remain in the document layout.

Using Number Values

Number values express opacity on a scale where zero represents full transparency and one represents full opacity.

For example:

.fully-visible {
  filter: opacity(1);
}
.semi-transparent {
  filter: opacity(0.5);
}
.nearly-transparent {
  filter: opacity(0.1);
}

These declarations retain 100%, 50%, and 10% of the rendered alpha values.

Decimal values are useful for precise adjustments:

filter: opacity(0.35);

This retains 35% opacity.

Numbers do not require a unit.

For example, opacity(0.5) is valid, while opacity(0.5px) is invalid.

Using Percentage Values

Percentages provide another way to specify the amount of opacity.

For example:

.box-a {
  filter: opacity(25%);
}
.box-b {
  filter: opacity(50%);
}
.box-c {
  filter: opacity(75%);
}

These values retain 25%, 50%, and 75% of the rendered alpha values.

Number and percentage values are interchangeable:

filter: opacity(0.5);
filter: opacity(50%);

Both declarations produce the same filtering effect.

Percentages can be easier to understand when describing opacity to beginners or when using design values expressed in percentages.

Applying Opacity to Images

The opacity() function is commonly applied to images.

For example:

img {
  filter: opacity(70%);
}

Every image matching the selector is rendered at 70% of its original opacity.

A class selector provides more control:

.faded-image {
  filter: opacity(40%);
}

The filter can also be used on background images by applying it to an element containing the background.

For example:

.banner {
  background-image: url("banner.jpg");
  filter: opacity(60%);
}

However, this also affects the rendered contents of the banner, including any text or child elements.

If only the background should be transparent, use a separate background layer, pseudo-element, or a color with alpha transparency instead.

Combining Filter Functions

The opacity() function can be combined with other CSS filter functions in a single filter declaration.

For example:

.image {
  filter: grayscale(100%) opacity(60%);
}

This converts the rendered image to grayscale and reduces its opacity to 60%.

Another example:

.image {
  filter: blur(2px) opacity(75%);
}

This blurs the image and reduces its opacity.

Multiple filter functions are separated by spaces, not commas.

For example:

.image {
  filter: brightness(110%) contrast(120%) opacity(80%);
}

Filters are applied in the order they are written. Changing the order can affect the result, particularly when filters such as drop-shadow() are involved.

Using multiple filter declarations does not combine their effects. The later valid declaration replaces the earlier one.

Hover Effects and Transitions

The opacity() function can be animated using CSS transitions.

For example:

.image {
  filter: opacity(60%);
  transition: filter 0.3s ease;
}
.image:hover {
  filter: opacity(100%);
}

The image gradually becomes fully opaque when the pointer moves over it.

Another example fades an element on hover:

.card {
  filter: opacity(100%);
  transition: filter 0.3s ease;
}
.card:hover {
  filter: opacity(70%);
}

For consistent interpolation, keep the same filter function in both transition states.

Hover effects should not be the only way important information becomes visible, because touch and keyboard users may not trigger the same interaction.

For essential interactive elements, provide appropriate keyboard focus styling and maintain readable contrast.

opacity() vs. opacity Property

The opacity() filter function and the CSS opacity property can produce similar transparency effects, but they are different CSS features.

For example:

.box-a {
  filter: opacity(0.5);
}
.box-b {
  opacity: 0.5;
}

For simple transparency, both often produce a similar visible result.

However, they participate in different rendering operations and may behave differently when combined with other filters, blending, or compositing effects.

For general element transparency, the opacity property is usually the simpler choice.

Use the opacity() function when transparency is part of a filter chain.

opacity() vs. Alpha Transparency

The opacity() function changes the transparency of an element's rendered output, while alpha transparency in a CSS color affects the color itself.

For example:

.box-a {
  background-color: rgb(0 102 204 / 50%);
}

Only the background color is made semi-transparent. Text and other content can remain fully opaque.

By comparison:

.box-b {
  background-color: #0066cc;
  filter: opacity(50%);
}

The filter reduces the opacity of the rendered box, including its background and contents.

Other CSS color functions also support alpha transparency:

background-color: hsl(210 100% 40% / 50%);
background-color: oklch(60% 0.15 250 / 50%);

Use alpha transparency when only a particular color should be transparent.

Use opacity() when the rendered element should be filtered as a whole.

Example

This example compares three boxes using different opacity() values.

HTML:

<div class="opacity-demo">
  <div class="opacity-demo-item opacity-demo-full">100%</div>
  <div class="opacity-demo-item opacity-demo-medium">60%</div>
  <div class="opacity-demo-item opacity-demo-low">25%</div>
</div>

CSS:

.opacity-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 15px;
  background-color: #f1f3f5;
}
.opacity-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 10px;
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
}
.opacity-demo-full {
  filter: opacity(100%);
}
.opacity-demo-medium {
  filter: opacity(60%);
}
.opacity-demo-low {
  filter: opacity(25%);
}

The first box retains full opacity, the second retains 60%, and the third retains 25%.

Both the blue background and the white text become more transparent as the opacity amount decreases.

Combined Filter Example

This example combines opacity() with grayscale() and demonstrates a transition when the pointer moves over the filtered element.

HTML:

<div class="opacity-filter-demo">
  <div class="opacity-filter-box">
    <span class="opacity-filter-icon">CSS</span>
    <span>Hover to Restore Color</span>
  </div>
</div>

CSS:

.opacity-filter-demo {
  display: flex;
  justify-content: center;
  padding: 25px;
  background-color: #f1f3f5;
}
.opacity-filter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 220px;
  min-height: 150px;
  padding: 20px;
  background: linear-gradient(135deg, #0066cc, #00a896);
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  filter: grayscale(100%) opacity(50%);
  transition: filter 0.3s ease;
}
.opacity-filter-box:hover {
  filter: grayscale(0%) opacity(100%);
}
.opacity-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
}

Initially, the box appears in grayscale at 50% opacity.

When hovered, the grayscale filter is removed and the opacity increases to 100%.

The transition smoothly interpolates between the two filter states.

Common Uses

The opacity() function is useful when transparency needs to be applied as part of a CSS filter effect.

For example:

.thumbnail {
  filter: opacity(70%);
}
.thumbnail:hover {
  filter: opacity(100%);
}
.muted-image {
  filter: grayscale(100%) opacity(50%);
}
.decorative-element {
  filter: opacity(30%);
}

These effects can make images and decorative elements less visually prominent.

For simple transparency without additional filters, consider using the opacity property instead.

Limitations

The opacity() function has several important rules and limitations.

• The function is used with the filter property and other properties that accept CSS filter functions.
• It accepts one optional number or percentage argument.
• Negative values are invalid.
• Values greater than 100% are clamped to full opacity for rendering.
• The function affects the rendered appearance of an element and its contents.
• It does not remove an element from document layout.
• Fully transparent content can remain interactive and accessible to assistive technology.
• It cannot selectively change only a background color without also filtering the rendered contents.
• Multiple filter functions must be combined within one filter declaration.
• Reduced opacity can make text and interface elements difficult to read.

For example, this is valid:

filter: opacity(50%);

The following is invalid because it uses a length:

filter: opacity(50px);

The following is invalid because it uses a negative value:

filter: opacity(-0.5);

The following does not combine both filters:

filter: grayscale(100%);
filter: opacity(50%);

The second declaration replaces the first.

To apply both filters, write:

filter: grayscale(100%) opacity(50%);

Use reduced opacity carefully when working with text, controls, and other important content.

Browser Support

The CSS opacity() filter function is Baseline Widely available and has been supported across major browser engines since 2016.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support the function.

For example:

.image {
  filter: opacity(50%);
}

Older browsers may not recognize CSS filter functions. A fallback can be provided using the opacity property when only simple transparency is needed:

.image {
  opacity: 0.5;
}
@supports (filter: opacity(50%)) {
  .image {
    opacity: 1;
    filter: opacity(50%);
  }
}

Browsers supporting the filter use opacity(), while unsupported browsers retain the standard opacity property.

For current compatibility information, visit Can I Use? and search for CSS Filter Effects.

Specifications

The opacity() function is defined in the Filter Effects Module Level 1 .

The specification defines the function's accepted values and how it modifies alpha values in the filtered image.

Related CSS filter functions include brightness(), contrast(), grayscale(), blur(), and saturate().