Are you a member? Register or Login

Open Menu

Cross Browser Transparency

There are many complicated methods to create transparency effects across the various browsers available (Firefox, Safari, Internet Explorer), but it can be simple to achieve this effect using a few CSS tricks. Albeit with a couple of limitations.

The Must-Have Subscription for Creative Pros

Envato Elements gives you unlimited access to over 1,400,000 professional design resources, themes, templates, photos, graphics and more. It's the best subscription for creative pros, with everything you need for your next project.

Explore Digital Assets

Transparency rules

Mozilla browsers can display transparency, using an effect specified through -moz-opacity: 0.5; where the value is between 0 (completely transparent) and 1 (opaque).

Internet Explorer uses a filter property to allow you to show transparency. It takes the form filter: alpha(opacity=50); where the opacity value is between 0 and 100.

Some other browsers (and future browsers) will conform to the CSS3 specification allowing the property opacity: 0.5; with the value between 0 or 1 as with the Mozilla effect.

The way to get this working in all browsers is simply a matter of using all three rules at the same time:

Limitations

The main problem with the above CSS code is that it is notoriously browser specific, and thus does not conform to valid CSS standards. This doesn’t stop it working correctly, but does mean that your CSS code won’t validate.

Also, as new browsers are released and updated you’ll need to alter the above. Hopefully as they adopt the CSS3 standard more strictly, simply using the opacity: 0.5; rule will suffice.