In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > opacity

opacity property

Browser support:

9

Sets the transparency level of an element. For Internet Explorer, use filter with 'Alpha(opacity=percent)'.

Note: Internet Explorer supports the opacity property from version 9.

In older Internet Explorer versions, use the filter.alpha property.
The opacity property works for all elements, as opposed to Internet Explorer's filter.alpha property that only works for absolute positioned elements.
The example below shows a cross-browser solution for creating the opacity effect from CSS.

JavaScript page for this property: opacity. You can find other example(s) there.

Possible values:

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

opacity (floating-point [0-1])

Floating-point number [0-1] .

Default: 1.

Example HTML code 1:

This example illustrates the use of the opacity property:

<head>
    <style>
        .opacity {
            opacity: 0.5;
        }

        .IEopacity {
            filter:alpha(opacity=50);
            position:absolute;
            left:30px;
            top:100px;
        }
    </style>
</head>
<body>
    <a class="opacity IEopacity">This text has an opacity of 0.5</a>
</body>