css3 Icon Logo

Written by me@grafxflow

01 Oct, 2012



Making CSS alpha opacity work in all browsers

Most modern browsers can accept the CSS->opacity, but for Internet Explorer 8 or below you have to use the CSS->filter:alpha.

    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);

Here is the scss @mixin.

@mixin opacity($opacity){
    $ie-value: $opacity * 100;
    opacity: $opacity;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ie-value+")";
    filter: alpha(opacity=$ie-value);


Opacity works for Safari, Firefox, Chrome, Opera and Internet Explorer 9 and uses a value between 0.0 and 1.0.

Filter:alpha works for Internet Explorer 5, Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8 and is set using a values between 0 and 100.

One thing to note is that when using opacity/alpha on a div tag that contains text and pictures, they will also be affected with the opacity/alpha setting.

Add comment

Smart Search

132 Following


Hull, United Kingdom

I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!