Search code examples
cssopacity

CSS3: opacity vs filter opacity?

I was playing with the CSS3 filter functions (blur, contrast, invert, etc.), and noticed there is an opacity function:

filter: opacity(0.5);
-webkit-filter: opacity(0.5);
-moz-filter: opacity(0.5);

While we already have:

opacity: 0.5;

If we apply both of them for a HTML element, it seems like it's getting double effect!

Now that makes me wonder, is there any difference?

EDIT:

I'm not asking about the old IE filter: alpha(opacity=50) as that is Microsoft's implementation. I'm asking about the CSS3 filter vs CSS3 opacity?

Solution

  • Thank you @JoeRohney to point out @ArmanNisch's answer, I'm posting this answer as future reference to anyone looking for an answer from official source.

    Based on official source (Mozilla documentations) about filter: opacity(value):

    Note: This function is similar to the more established opacity property. The difference is that with filters, some browsers provide hardware acceleration for better performance.