CSS Opacity / Transparency

The opacity CSS property specifies the transparency of an element.

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Example -

Cross Browser Opacity

Opacity is now a part of the CSS3 specifications, but it was present for a long time. However, older browsers have different ways of controlling the opacity or transparency.

CSS Opacity in Firefox, Safari, Chrome, Opera and IE9

Here is the most up to date syntax for CSS opacity in all current browsers.

Example -

Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Example -

CSS Opacity for All Browser

Combining the both steps above you will get the opacity for all browsers.

Example -

Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

Example -

Text in Transparent Box

Example -