CSS alpha() Function

CSS alpha() Function

The alpha() function was part of a proprietary Internet Explorer filter used to control an element's transparency. It allowed developers to adjust opacity using a percentage from 0 to 100. This legacy feature is not part of standard CSS and is not supported in modern browsers.

Syntax

filter: alpha(opacity=50);

The legacy alpha() filter used an opacity parameter to control transparency.

For example:

.example {
  filter: alpha(opacity=50);
}

In older Internet Explorer versions, this made the element approximately 50% opaque.

The same effect can be achieved in modern CSS using:

.example {
  opacity: 0.5;
}

Note: The legacy alpha() filter is unrelated to the modern CSS opacity() filter function and the alpha channel used in CSS color values.

Parameters

The legacy alpha() filter accepted several parameters.

The most common use was alpha(opacity=50), which applied uniform transparency.

More advanced settings could produce transparency gradients, but these proprietary options are obsolete.

How It Works

The alpha() filter was processed by the rendering engine in older versions of Internet Explorer.

When applied to an element, it controlled how much of that element remained visible.

For example:

.example {
  filter: alpha(opacity=25);
}

The element appeared approximately 25% opaque, allowing more of the background to show through.

Increasing the value made the element less transparent.

.example {
  filter: alpha(opacity=75);
}

This made the element approximately 75% opaque.

Unlike modern CSS functions, the filter used a proprietary parameter assignment format with an equals sign.

It was also commonly written using Microsoft's extended filter syntax:

.example {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

Both forms belong to legacy Internet Explorer styling and should not be used in new projects.

Opacity Values

The opacity parameter used values from 0 to 100.

To convert a legacy opacity value to the modern opacity property, divide the value by 100.

For example, alpha(opacity=60) corresponds to opacity: 0.6;.

Example

The following code demonstrates how the legacy filter was used to make an element partially transparent.

HTML:

<div class="legacy-alpha">Transparent Element</div>

CSS:

.legacy-alpha {
  background-color: #0066cc;
  color: #fff;
  padding: 20px;
  filter: alpha(opacity=50);
}

In older Internet Explorer versions that supported this filter, the element and its contents would appear at approximately 50% opacity.

Browser Result: This legacy example is not rendered because modern browsers do not support the proprietary alpha() filter.

The following section demonstrates the equivalent effect using standard CSS.

Modern Alternative

Use the standard CSS opacity property to control an element's transparency.

The following example displays three blue boxes with different opacity values.

HTML:

<div class="alpha-demo">
  <div class="alpha-box alpha-one">25%</div>
  <div class="alpha-box alpha-two">50%</div>
  <div class="alpha-box alpha-three">100%</div>
</div>

CSS:

.alpha-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.alpha-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 80px;
  background-color: #0066cc;
  color: #fff;
  font-weight: bold;
}
.alpha-one {
  opacity: 0.25;
}
.alpha-two {
  opacity: 0.5;
}
.alpha-three {
  opacity: 1;
}

The first box is 25% opaque, the second is 50% opaque, and the third is fully opaque.

The opacity property affects the entire element, including its text and child elements.

If only the background should be transparent, use a color with an alpha channel instead:

.example {
  background-color: rgb(0 102 204 / 50%);
}

This creates a 50% transparent blue background without reducing the opacity of the element's text.

alpha() vs. opacity

The legacy alpha() filter and the modern opacity property serve similar purposes, but their syntax and browser support differ.

For current websites, use the standard opacity property.

Limitations

The legacy alpha() filter has several limitations.

• It is proprietary Microsoft syntax and was never standardized as a CSS function.
• It is not supported in modern browsers.
• It requires legacy Internet Explorer filter processing.
• Its extended transparency patterns do not map directly to the modern opacity property.
• It can affect an entire rendered element, including its contents.
• It should not be used for new web development.

For uniform transparency, replace the legacy filter with opacity.

For transparency gradients, consider CSS masks or gradients with alpha-channel colors, depending on the desired effect.

Browser Support

The alpha() filter was supported by older versions of Internet Explorer through Microsoft's proprietary filter system.

It is not part of Baseline and is not supported in modern Chrome, Firefox, Safari, Edge, or other standards-based browser engines.

Internet Explorer itself is retired, and the filter should be treated as obsolete.

For modern transparency effects, use the widely supported CSS opacity property or alpha-channel color values.

For compatibility information, visit Can I Use? and search for CSS opacity.

Specifications

The legacy alpha() filter was a proprietary Microsoft extension and was never included in an official CSS specification.

The modern opacity property is defined in the CSS Color specification.

For new projects, use standardized CSS transparency features instead of proprietary Internet Explorer filters.