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
Wave inside Text using pure CSS
CSS allows developers to create animated wave effects inside text elements. This technique creates visually appealing text animations that simulate water waves flowing through the letters, enhancing the visual impact of web content.
Syntax
@keyframes wavey {
0%, 100% {
clip-path: polygon(/* initial wave coordinates */);
}
50% {
clip-path: polygon(/* peak wave coordinates */);
}
}
Method 1: Using Clip-Path Animation
This approach uses the clip-path property to create a wave mask that moves through the text. We overlay two identical text elements one with a transparent fill and stroke, another with solid color and animated clipping.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
margin: 50px;
}
.text {
font-size: 4rem;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
}
.text:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px #333;
}
.text:nth-child(2) {
color: #007bff;
animation: wavey 3s ease-in-out infinite;
}
@keyframes wavey {
0%, 100% {
clip-path: polygon(0 45%, 16% 38%, 28% 35%,
40% 47%, 52% 64%, 64% 72%, 76% 65%,
88% 48%, 100% 42%, 100% 100%, 0 100%);
}
50% {
clip-path: polygon(0 65%, 12% 72%, 24% 68%,
36% 55%, 48% 42%, 60% 38%, 72% 45%,
84% 58%, 100% 62%, 100% 100%, 0 100%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="text">WAVE TEXT</div>
<div class="text">WAVE TEXT</div>
</div>
</body>
</html>
Text appears with an outlined border and a blue wave pattern that animates through the letters, creating a flowing water effect.
Method 2: Using Radial Gradient Background
This method uses multiple radial gradients as a background and animates their position to create a wave effect that moves through the text.
<!DOCTYPE html>
<html>
<head>
<style>
.wave-text {
font-size: 3rem;
font-weight: bold;
margin: 50px;
background:
radial-gradient(circle, #ff6b6b 40%, transparent 41%) 0% 0%,
radial-gradient(circle, #4ecdc4 40%, transparent 41%) 25% 0%,
radial-gradient(circle, #45b7d1 40%, transparent 41%) 50% 0%,
radial-gradient(circle, #96ceb4 40%, transparent 41%) 75% 0%;
background-size: 25% 100%;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: wave-bg 2s linear infinite;
}
@keyframes wave-bg {
to {
background-position: -100% 0%, -75% 0%, -50% 0%, -25% 0%;
}
}
</style>
</head>
<body>
<div class="wave-text">FLOWING WAVES</div>
</body>
</html>
Text displays with colorful circular gradients that move horizontally through the letters, creating a smooth wave animation effect.
Method 3: Character-by-Character Wave Motion
This approach animates each character individually with a vertical motion and staggered timing to simulate a wave passing through the text.
<!DOCTYPE html>
<html>
<head>
<style>
.wave-container {
margin: 100px;
text-align: center;
}
.wave-container span {
display: inline-block;
font-size: 2.5rem;
font-weight: bold;
color: #e74c3c;
animation: char-wave 1.5s ease-in-out infinite;
}
.wave-container span:nth-child(1) { animation-delay: 0s; }
.wave-container span:nth-child(2) { animation-delay: 0.1s; }
.wave-container span:nth-child(3) { animation-delay: 0.2s; }
.wave-container span:nth-child(4) { animation-delay: 0.3s; }
.wave-container span:nth-child(5) { animation-delay: 0.4s; }
.wave-container span:nth-child(6) { animation-delay: 0.5s; }
.wave-container span:nth-child(7) { animation-delay: 0.6s; }
.wave-container span:nth-child(8) { animation-delay: 0.7s; }
.wave-container span:nth-child(9) { animation-delay: 0.8s; }
@keyframes char-wave {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<div class="wave-container">
<span>C</span>
<span>H</span>
<span>A</span>
<span>R</span>
<span> </span>
<span>W</span>
<span>A</span>
<span>V</span>
<span>E</span>
</div>
</body>
</html>
Each character bounces up and down in sequence, creating a wave-like motion that flows from left to right across the text.
Conclusion
CSS provides multiple techniques for creating wave effects in text. The clip-path method offers precise control over wave shapes, gradient backgrounds create smooth flowing effects, and character animation produces bouncing wave motions.
1K+ Views
