What is the difference between "opacity" and "filter: opacity()"

Question

Most of us know the simple opacity CSS rule, but recently I stumbled upon filter which can have opacity(amount) as it value - among other things. But what exactly is the difference between the two?

Answer 1

filter: opacity() is similar to the more established opacity property; the difference is that with filter: opacity(), some browsers provide hardware acceleration for better performance. Negative values are not allowed.

filter: opacity() applies transparency. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the “amount” parameter is missing, a value of 100% is used.

Source: https://css-tricks.com/almanac/properties/f/filter/

/*
* -----------
* filter: opacity([ <number> or <percentage> ])
* -----------
*/

.filter-opacity {
  filter: opacity(0.3);
  height: 5rem;
  width: 5rem;
  background-color: mediumvioletred;
}

/*
* -----------
* standard opacity
* -----------
*/

.just-opacity {
  opacity: 0.3;
  height: 5rem;
  width: 5rem;
  background-color: lawngreen;
}

<div class="filter-opacity">
  filter-opacity
</div>

<div class="just-opacity">
  just-opacity
</div>

Answer 2

I've found some difference between them both, especially in the Chrome browser. If we set the CSS opacity property to an iframe tag, then we'll not be able to click any links inside this frame (I guess, it's a protection from clickjacking attack) while filter: opacity(0) allows us to click any links. I don't know, maybe it's an omission from Chrome developers' side.

Answer 3

filter in CSS had some different runs, namely for FireFox and MSIE.

---

In MSIE 5.5 on through 7, filter, also known as Alpha Filter, actually makes use of MSIE's DX Filter (no longer supported). However, in order to be more CSS2.1 compliant, in IE8 MS introduced -ms-filter to replace filter. The syntax is different in that the value of -ms-filter must be encased in quotes. Eventually, IE9 brought deprecation to this method and as of IE10, it is no longer used.

---

Another interesting note here, if you're wanting full compatibility for older IE, then you must make sure use of filter and -ms-filter must be very specific. For example, the following does not work in IE8 running IE7 compat mode:

element {
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

-ms-filter must come before filter in order to get more out of older IE compatibility.Like so:

element {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

---

FireFox made use of filter as an experiment gone awry. I believe the original idea was to mock what IE was doing in using the Direct X engine. There was even a browser specific version, as there was for most browsers at one time. Eventually, HTML5/CSS3 announced use of the filter namespace and it now has a new purpose.

---

As of CSS3, filter now has a whole new meaning! Firefox docs stay open as if they plan to expand on this, though I've yet to see it (however they do crash JS if your CSS is not to its liking now!). Webkit (which will probably become standard in next update to CSS3) has started to implement filter to the point you can almost "photoshop" images for your site!

Since filter is changing so much, opacity would be the preferred method to use, however, as you can see, to be completely cross-browser compatible means being very thorough.

---

Browser specific alternates:

• -webkit-filter: filter(value);
• -moz-filter: filter(value);
• -o-filter: filter(value);
• -ms-filter: "progid:DXCLASS.Object.Attr(value)";

---

See Also:

• What's compatible with opacity?
• What's compatible with the newer filter?
  • keep in mind, not the same as Older IE's filter