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
Give the object a sine wave distortion to make it look wave with CSS
The CSS wave effect uses Internet Explorer's proprietary filter to give objects a sine wave distortion, making them appear wavy. This filter was specific to older IE browsers and is not supported in modern web standards.
Syntax
selector {
filter: Wave(Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value);
}
Parameters
| Parameter | Description |
|---|---|
| Add | A value of 1 adds the original image to the waved image, 0 does not |
| Freq | The number of waves |
| LightStrength | The strength of the light on the wave (from 0 to 100) |
| Phase | At what degree the sine wave should start (from 0 to 100) |
| Strength | The intensity of the wave effect |
Example: Wave Effect on Image and Text
The following example demonstrates how to apply the wave filter to both an image and text −
<!DOCTYPE html>
<html>
<head>
<style>
.wave-image {
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10);
width: 200px;
}
.wave-text {
width: 357px;
height: 50px;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20);
}
</style>
</head>
<body>
<img src="/css/images/logo.png" alt="CSS Logo" class="wave-image">
<p>Text Example:</p>
<div class="wave-text">CSS Tutorials</div>
</body>
</html>
The image and text would appear with a wavy distortion effect in Internet Explorer browsers that supported this filter.
Note: This filter only works in Internet Explorer and is not supported in modern browsers. For modern wave effects, consider using CSS transforms, SVG filters, or JavaScript libraries.
Conclusion
The CSS Wave filter was an Internet Explorer-specific feature for creating sine wave distortions. While not supported in modern browsers, it demonstrates early attempts at visual effects in web design.
Updated on: 2026-03-15T11:43:15+05:30
601 Views
Advertisements