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
Make any particular color transparent with CSS Filters
The CSS chroma filter is a legacy Internet Explorer filter that was used to make a specific color transparent in an element. This filter allows you to specify a color that should become transparent, effectively creating a "color key" effect similar to green screen technology.
Syntax
selector {
filter: Chroma(Color = #colorvalue);
}
Parameters
| Parameter | Description |
|---|---|
| Color | The hexadecimal color value that you want to make transparent |
Example: Making White Background Transparent
The following example demonstrates how to make white color (#FFFFFF) transparent in an image −
<!DOCTYPE html>
<html>
<head>
<style>
.transparent-white {
filter: Chroma(Color = #FFFFFF);
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h3>Image with Transparent White</h3>
<div class="transparent-white">
Content with white background made transparent
</div>
</body>
</html>
A bordered box appears where the white background color has been made transparent using the chroma filter.
Example: Text with Transparent Color
You can also apply the chroma filter to text elements to make specific text colors transparent −
<!DOCTYPE html>
<html>
<head>
<style>
.transparent-text {
width: 300px;
height: 60px;
font-size: 24pt;
font-family: Arial, sans-serif;
color: #3300FF;
filter: Chroma(Color = #3300FF);
background-color: #ffff99;
padding: 10px;
}
</style>
</head>
<body>
<div class="transparent-text">CSS Tutorials</div>
</body>
</html>
Text appears with the blue color (#3300FF) made transparent, creating a see-through effect on a yellow background.
Note: The chroma filter is a legacy Internet Explorer feature and is not supported in modern browsers. For cross-browser transparency effects, use modern CSS properties likeopacity,rgba()colors, ortransparentkeyword instead.
Conclusion
While the CSS chroma filter provided color transparency effects in older browsers, modern web development should use standard CSS transparency methods for better browser compatibility and performance.
Updated on: 2026-03-15T11:30:08+05:30
1K+ Views
Advertisements