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
Flatten the color depth with CSS
The CSS Xray filter is an Internet Explorer-specific filter that flattens the color depth by creating a grayscale, inverted effect similar to an X-ray image. This filter removes color saturation and inverts the brightness values.
Syntax
selector {
filter: Xray;
}
Parameter
| Parameter | Description |
|---|---|
| Xray | Grayscales and flattens the color depth, creating an inverted monochrome effect |
Note: The Xray filter is a legacy Internet Explorer filter and is not supported in modern browsers. Consider using CSS filters likegrayscale()andinvert()for cross-browser compatibility.
Example: Applying Xray Filter to Image
The following example demonstrates how to apply the Xray filter to an image −
<!DOCTYPE html>
<html>
<head>
<style>
.xray-image {
filter: Xray;
width: 200px;
height: 150px;
border: 2px solid #333;
}
</style>
</head>
<body>
<h3>Original vs Xray Effect</h3>
<img src="/css/images/logo.png" alt="CSS Logo Original" width="200" height="150">
<img src="/css/images/logo.png" alt="CSS Logo with Xray" class="xray-image">
</body>
</html>
Two images are displayed side by side. The first shows the original colored image, while the second shows the same image with the Xray filter applied, appearing as a grayscale inverted version.
Example: Applying Xray Filter to Text
You can also apply the Xray filter to text elements −
<!DOCTYPE html>
<html>
<head>
<style>
.normal-text {
font-size: 30pt;
font-family: Arial Black;
color: red;
margin: 10px 0;
}
.xray-text {
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray;
margin: 10px 0;
}
</style>
</head>
<body>
<p>Normal Text:</p>
<div class="normal-text">CSS Tutorials</div>
<p>Xray Filter Applied:</p>
<div class="xray-text">CSS Tutorials</div>
</body>
</html>
Two text examples are shown. The first displays "CSS Tutorials" in normal red text. The second shows the same text with the Xray filter applied, appearing inverted and grayscale.
Browser Support
The Xray filter is only supported in Internet Explorer and is considered deprecated. For modern web development, use standard CSS filters like grayscale(1) invert(1) to achieve similar effects with cross-browser support.
Conclusion
The CSS Xray filter creates a grayscale, inverted effect that flattens color depth. While this filter is IE-specific and deprecated, understanding legacy filters helps maintain older codebases and provides insight into modern CSS filter alternatives.
340 Views
