Setting Cross Browser Opacity using CSS

The property opacity is the modern solution and works for Firefox 0.9+ , Safari 2, opera 9+, IE 9+ and every version of chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. The filter property is for IE browsers from 5 to 9 to give opacity like effect. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers.

Following is code for having cross browser opacity using CSS −


 Live Demo

<!DOCTYPE html>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
img {
   width: 270px;
   height: 200px;
.transparent {
   filter: alpha(opacity=30);
   -moz-opacity: 0.3;
   -khtml-opacity: 0.3;
   opacity: 0.3;
<h1>Cross browser opacity</h1>
<img src="" />
<img class="transparent" src="" />
<h3>The second image above will get opaque on all browsers</h3>


The above code will produce the following output −

Updated on: 07-May-2020


Kickstart Your Career

Get certified by completing the course

Get Started