CSS Opacity that Works in All Browsers

CSSWeb DevelopmentFront End Technology

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 image opacity using CSS that works in all browsers −


 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>Opacity for all browsers</h1>
<img src="https://i.picsum.photos/id/305/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" />
<h3>The second image above will get opaque on all browsers</h3>


The above code will produce the following output −

Published on 12-May-2020 13:02:40