CSS Image Opacity for All Web Browsers including IE 8 and less

The property opacity is the ultimate and modern solution and works for Firefox 0.9+, Safari 2, opera 9+, IE 9+ and every version of Google 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.

Following is code for image opacity using CSS for all browsers −


 Live Demo

<!DOCTYPE html>
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
img {
   filter: alpha(opacity=30);
   -moz-opacity: 0.3;
   -khtml-opacity: 0.3;
   opacity: 0.3;
<h1>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >


The above code will produce the following output −