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 Chroma Filter
The CSS chroma filter is a legacy Internet Explorer-specific filter that was used to make a particular color transparent. This filter is not supported in modern browsers and has been replaced by CSS3 properties like background-color: transparent and opacity.
Syntax
filter: chroma(color=colorvalue);
Legacy Browser Support
Note: The chroma filter only worked in Internet Explorer and is now obsolete. Modern browsers do not support this property.
Important: This filter is deprecated and should not be used in modern web development. Use CSS3 alternatives instead.
Example: Legacy Chroma Filter (IE Only)
The following example shows how the chroma filter was used in older Internet Explorer versions −
<!DOCTYPE html>
<html>
<head>
<style>
.legacy-filter {
width: 300px;
height: 100px;
background-color: #3300FF;
color: white;
font-family: Arial;
font-size: 24px;
padding: 20px;
/* Legacy IE filter - not supported in modern browsers */
filter: chroma(color=#3300FF);
}
.modern-alternative {
width: 300px;
height: 100px;
background-color: transparent;
color: #3300FF;
font-family: Arial;
font-size: 24px;
padding: 20px;
border: 2px solid #3300FF;
}
</style>
</head>
<body>
<h3>Legacy Chroma Filter (Not Supported):</h3>
<div class="legacy-filter">CSS Tutorials</div>
<h3>Modern Alternative:</h3>
<div class="modern-alternative">CSS Tutorials</div>
</body>
</html>
The legacy filter will not work in modern browsers. The modern alternative shows a transparent background with blue text and border.
Modern Alternatives
Instead of using the obsolete chroma filter, use these modern CSS properties −
-
background-color: transparentfor transparent backgrounds -
opacityproperty for element transparency -
rgba()orhsla()color values for alpha transparency
Conclusion
The CSS chroma filter is deprecated and not supported in modern browsers. Use CSS3 transparency properties like opacity and rgba() instead for better cross-browser compatibility.
Updated on: 2026-03-15T11:51:04+05:30
3K+ Views
Advertisements