CSS Almanac → Functions → O → opacity()

opacity()

Gabriel Shoyombo on Nov 18, 2025

The CSS opacity() function applies a transparency filter to an element and its content. It is used with the filter property, which allows us to apply varying visual effects, like blur(), grayscale(), sepia(), and yes, opacity().

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

The CSS opacity() function is listed in the Filter Effects Module Level 1 specification.

Syntax

The opacity() function’s syntax looks like this:

<opacity()> = opacity( [ <number> | <percentage> ]? )

…which is basically saying it’s a function that takes one of two possible values — a number (between 0 and 1) or a percentage (0% through 100%) — as an argument. The lower the number, the more opaque the element, and vice versa.

Arguments

/* fully opaque */
.element {
  filter: opacity(1);
  filter: opacity(100%);

  /* transparency */
  filter: opacity(0.2); /* 80% transparent */
  filter: opacity(50%); /* 50% transparent */

  /* Fully transparent */
  filter: opacity(0);
  filter: opacity(0%);
}

The opacity() function takes a single argument:

<number> | <percentage> (optional): It can be a number from 0 to 1, or a percentage from 0% to 100%, where 0/0% represent total transparency, and 1/100% indicates full opacity.

`opacity()` vs. `opacity`

The opacity() function and the opacity property are visually similar. However, they work a little differently.

The opacity property is the CSS default transparency control. It works best for transitions — like applying transparency on an element on hover — but the opacity() function is better for complex visual effects where you might want to mix transparency with other filter functions (e.g., blur(), contrast(), grayscale(), etc.).

There are a few more notes about them that are worth calling out:

They create a stacking context: Both of them create a stacking context when an element’s opacity is set to any value less than 1 (or 100%). That means any child elements remain beneath the parent element, which helps prevent them from weaving in and out with other surrounding elements.
Speaking of stacking contexts: If the parent element’s z-index property is set to auto, then it is the same as setting it to 0.
They affect performance: opacity() and opacity are both highly performant. The function is hardware-accelerated on some browsers (super fast!), while the property is GPU-accelerated (a little less speedy).

Which one should you use? I’d say you go for the opacity property if all you’re doing is setting transparency on an element, and the opacity() function when you want to apply additional filter functions.

Basic usage

Here’s a pretty common thing you’ll see opacity() used for: the backdrop of a text overlay. On an image, for example. If you want to display text on top of an image, then it might be tough to read. Hover over the image in the following demo. You’ll see that there could be more contrast between the image and the text that is revealed.

We can fix that with the help of a little background tinting and image opacity()! Let’s first set a background against the text when it is revealed:

That’s nice and all, but we can make the text pop a little more by dulling the image with a little transparency at the same time:

.card img {
  filter: opacity(0.8); /* Slightly dimmed by default */
  transition: filter 0.3s ease;
}

.card:hover img {
  filter: opacity(1); /* Fully visible */
}

That’s nicer:

Example: Disabled states

The opacity() filter function is also very useful to differentiate between active and disabled states, especially for buttons. In forms, you can use something like opacity(50%) to give your button a 50% opacity and an illusion of being disabled.

/* Disabled state using filter: opacity */
button[disabled] {
  filter: opacity(0.5); /* visually dimmed */
  cursor: not-allowed;
  pointer-events: none;
}

By using the [attribute] selector, we can check for the presence of the disabled attribute in the button and set the filter opacity() function to 50%.

Example: Image overlays

Another use for opacity() is making banners with text overlays, where the background is just the right amount of transparent, while making the text visible enough.

.overlay {
  background: black;
  filter: opacity(0.5); /* Dark mask */
}

Example: Animation

Modals can get quirky if they show immediately after you click the open modal button, so using the opacity() filter, you can add a fade-in or fade-out animation to give the appearance that the modal is popping in or out rather than snapping in.

/* Modal backdrop */
.modal {
  filter: opacity(0);
  pointer-events: none;
  transition: filter 0.5s ease;
}

/* Active/visible modal */
.modal.show {
  filter: opacity(1);
  pointer-events: auto;
}

Accessibility

It’s also important to note that both opacity() and opacity only affect the visual appearance of an element. An element set to filter: opacity(0) or opacity: 0 is visually hidden, but it is still exposed to assistive technology, such as screen readers. This means a user navigating with a screen reader will still hear the content of the hidden element, so we should also hide it semantically. For more context on hiding content responsibly, you can check out this article by Chris Coyier.