Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS Alpha Channel filter
The CSS Alpha Channel filter is a legacy Internet Explorer filter that alters the opacity of an element, creating transparency effects and gradient blending with the background. While this filter is obsolete in modern web development, it was historically used to create alpha transparency effects.
Syntax
filter: Alpha(opacity=value, finishopacity=value, style=value, startX=value, startY=value, finishX=value, finishY=value);
Parameters
| Parameter | Description |
|---|---|
| Opacity | Level of the opacity. 0 is fully transparent, 100 is fully opaque. |
| finishopacity | Level of the opacity at the other end of the object. |
| Style | The shape of the opacity gradient. 0 = uniform 1 = linear 2 = radial 3 = rectangular |
| startX | X coordinate for opacity gradient to begin. |
| startY | Y coordinate for opacity gradient to begin. |
| finishX | X coordinate for opacity gradient to end. |
| finishY | Y coordinate for opacity gradient to end. |
Example
The following example demonstrates how the Alpha filter was used with images and text elements −
<!DOCTYPE html>
<html>
<head>
<style>
.alpha-image {
width: 200px;
height: 150px;
background-color: #4CAF50;
filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);
}
.alpha-text {
width: 300px;
height: 50px;
font-size: 24pt;
font-family: Arial Black;
color: blue;
filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=300, FinishY=0);
}
</style>
</head>
<body>
<h3>Image with Alpha Filter:</h3>
<div class="alpha-image"></div>
<h3>Text with Alpha Filter:</h3>
<div class="alpha-text">
CSS Tutorials
</div>
</body>
</html>
A green box with radial alpha transparency and blue text with linear alpha gradient from fully opaque to transparent appear on the page. Note: This filter only works in Internet Explorer and is not supported in modern browsers.
Modern Alternative
In modern CSS, use the opacity property and CSS gradients instead of the Alpha filter −
<!DOCTYPE html>
<html>
<head>
<style>
.modern-alpha {
width: 300px;
height: 50px;
background: linear-gradient(to right, blue, transparent);
font-size: 24pt;
font-family: Arial Black;
color: blue;
}
</style>
</head>
<body>
<div class="modern-alpha">Modern CSS Gradient</div>
</body>
</html>
A blue text element with a linear gradient background that fades from blue to transparent appears on the page.
Conclusion
The CSS Alpha Channel filter was an Internet Explorer-specific feature for creating transparency effects. Modern web development uses the opacity property and CSS gradients for cross-browser compatibility and better performance.
Updated on: 2026-03-15T11:29:33+05:30
2K+ Views
Advertisements