Works in Safari 1.2, Mozilla and Explorer 5.5+ Windows.

How to set the opacity of an element.


Test paragraph without opacity.

Test paragraph with opacity: 50%.

Input with opacity: 50%.

Style sheet:

.test {
	background-color: #CE6BBD;
	width: 100%;

.opaque {
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-opacity: .5;


Safari 1.2 is the only browser that supports opacity. It requires a fraction value, percentages are not allowed.

Safari 1.1 is rumoured to require the proprietary -khtml-opacity declaration.

Explorer Windows

Explorer Windows requires:

filter: alpha(opacity=50);

You must specify either a width or a height for any element you want to be opaque, (except for form fields, because they have a default width set). This is a consequence of the way Microsoft defines filters.


Mozilla requires the -moz-opacity property. This property requires a fraction as value. Percentages, which worked in earlier versions, don't work any more.

-moz-opacity: .5;