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
Wave effect with CSS?
The CSS wave effect is a legacy filter that was used to create sine wave distortions on elements, giving them a wavy appearance. This filter was primarily supported in Internet Explorer and is now obsolete. Modern CSS uses alternative techniques like transforms and animations to achieve wave effects.
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 360) |
| Strength | The intensity of the wave effect |
Example: Legacy Wave Filter (IE Only)
The following example demonstrates the legacy wave filter that only worked in Internet Explorer −
<!DOCTYPE html>
<html>
<head>
<style>
.wave-text {
width: 300px;
height: 60px;
font-size: 24pt;
font-family: Arial, sans-serif;
color: #ff4444;
filter: Wave(Add=0, Freq=2, LightStrength=15, Phase=20, Strength=15);
margin: 20px;
}
.wave-image {
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10);
}
</style>
</head>
<body>
<div class="wave-text">Wavy Text Effect</div>
<img src="/css/images/sample.png" alt="Sample" class="wave-image">
</body>
</html>
This code will not produce any wave effect in modern browsers as the Wave filter is obsolete and was only supported in Internet Explorer.
Modern Alternative: CSS Animations
For modern browsers, wave effects can be created using CSS transforms and animations −
<!DOCTYPE html>
<html>
<head>
<style>
.modern-wave {
display: inline-block;
font-size: 24px;
color: #007bff;
animation: wave-animation 2s ease-in-out infinite;
}
@keyframes wave-animation {
0%, 100% { transform: skewY(0deg); }
50% { transform: skewY(5deg); }
}
</style>
</head>
<body>
<div class="modern-wave">Modern Wave Effect</div>
</body>
</html>
Blue text that continuously skews back and forth creating a wave-like motion effect.
Conclusion
The CSS Wave filter is obsolete and not supported in modern browsers. For wave effects today, use CSS transforms, animations, or SVG-based solutions that provide better cross-browser compatibility.
Updated on: 2026-03-15T11:50:33+05:30
2K+ Views
Advertisements