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
Achieve X-Ray effect with CSS
The X-Ray effect in CSS is an Internet Explorer specific filter that converts colors to grayscale and flattens the color depth, creating a distinctive visual appearance similar to an X-ray image.
Syntax
selector {
filter: Xray;
}
Parameters
| Parameter | Description |
|---|---|
| Xray | Grayscales and flattens the color depth of the element |
Example
The following example demonstrates how to apply the X-Ray filter effect to both images and text −
<!DOCTYPE html>
<html>
<head>
<style>
.xray-image {
filter: Xray;
display: block;
margin: 20px 0;
}
.xray-text {
width: 400px;
height: 60px;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray;
padding: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<h3>Image with X-Ray Effect:</h3>
<img src="/css/images/logo.png" alt="CSS Logo" class="xray-image" />
<h3>Text with X-Ray Effect:</h3>
<div class="xray-text">CSS Tutorials</div>
</body>
</html>
The image appears in grayscale with flattened color depth. The red text "CSS Tutorials" also appears in grayscale with reduced color intensity, demonstrating the X-Ray effect on both image and text elements.
Browser Support
Note: The X-Ray filter is a proprietary Internet Explorer filter and is not supported in modern browsers. For cross-browser compatibility, use CSS filter: grayscale() or other standard CSS filters instead.
Conclusion
The X-Ray filter effect creates a grayscale appearance with flattened color depth. However, being an IE-specific filter, it's recommended to use modern CSS filter functions for better browser compatibility.
Updated on: 2026-03-15T11:33:11+05:30
921 Views
Advertisements