Creating a Wave Effect in Text with CSS
Creating a Wave Effect in Text with CSS
Developers can use CSS to add animation effects to HTML elements. Here, we’ll use CSS to add a wave effect to text, making it look like a real wave.
There are three ways to add a wave effect to text. We’ll look at each method in turn.
Syntax
Users can follow the syntax below to add a wave effect to text.
@keyframes wavey {
0%,
100% {
/* Add initial clipping path */
}
50% {
/* Final clipping path */
}
}
In the syntax above, we create keyframes for animating the text by changing its clipping path.
Example 1
In the example below, we create two
elements with the same text added to them. Using CSS, we position the text so that it overlaps the other. We set a transparent color and a blue border for the first text value. For the second text value, we set a red color and a wavy animation every 5 seconds.
To add the animation, we change the value of the clip-path property. In CSS, the clip-path property is used to display specific areas of an element while masking other areas. For example, here, we use specific coordinates to display a polygon around the text value and hide the rest of the second text value.
<html>
<head>
<style>
.head {
font-size: 30px;
font-weight: 300;
}
/* Set transparent color for the first text */
.text:nth-child(1) {
color: transparent;
-webkit-text-stroke: 1px blue;
}
/* Set wavy effect for the second text */
.text:nth-child(2) {
color: red;
animation: wavey 5s ease-in-out infinite;
}
.text {
font-size: 6rem;
position: absolute;
}
/* Animate the second text using the clip-path CSS property */
@keyframes wavey {
0%,
100% {
clip-path: polygon(0 45%, 6% 38%, 20% 27%,
38% 24%, 40% 47%, 49% 64%, 51% 72%,
74% 78%, 79% 75%, 100% 67%, 100% 100%,
0 100%);
}
50% {
clip-path: polygon(0 59%, 5% 71%, 24% 86%,
34% 71%, 41% 64%, 41% 46%, 51% 35%,
74% 21%, 89% 35%, 100% 42%, 100% 100%,
0 100%);
}
}
</style>
</head>
<body>
<p class = "text"> TUTORIALSPOINT </p>
<p class = "text"> TUTORIALSPOINT </p>
<div class = "head"> Adding a <i>Wave Effect</i> to Text Using HTML and CSS </div>
</body>
html>
Example 2
In the following example, we use the ‘radial-gradient’ and ‘background-position’ CSS properties to add a wavy effect to an HTML element. Here, we use a radial gradient to create a wavy gradient across the text, with each 25% of the text having the same shape, position, and color.
In the animation keyframes, we change the background position of the background element, causing it to move and create a wavy effect across the text.
<html>
<head>
<style>
.text {
display: inline-block;
padding: 10px;
font-size: 40px;
font-weight: bold;
/* Add a gradient background to the text */
background:
radial-gradient(100% 54% at top, blue 99%, red) calc(0*100%/3) 0,
radial-gradient(100% 58% at bottom, red 99%, blue) calc(3*100%/3) 0,
radial-gradient(100% 58% at top, blue 99%, red) calc(6*100%/3) 0,
radial-gradient(100% 58% at bottom, red 99%, blue) calc(9*100%/3) 0;
/* Set the background size and repeat mode */
background-size: 50% 100%;
background-repeat: no-repeat;
/* Set text as background clip */
-webkit-background-clip: text;
color: transparent;
background-clip: text;
animation: wavy 2s infinite linear;
}
@keyframes wavy {
/* Change background position */
to {
background-position:
calc(-6*100%/3) 0,
calc(-3*100%/3) 0,
calc(0*100%/3) 0,
calc(3*100%/3) 0;
}
}
</style>
</head>
<body>
<h2>Adding a <i>Wave Effect</i> to Text Using HTML and CSS</h2>
<div class = "text">Welcome to TutorialsPoint! </div>
</body>
</html>
Example 3
In the following example, instead of adding a wave effect to the text, we move each character of the text like a wave. Here, we add each character of the text within a <span> element. Then, we apply the wave-text animation to each character.
Within the ‘wave-text’ animation, we use the transform CSS property to move the characters in the Y direction. We then access the characters using the ‘nth-child’ CSS property and add a delay to the animation for each character.
<html>
<head>
<style>
.text {
margin-top: 5rem;
}
.text span {
display: inline-block;
font-size: 3rem;
color: blue;
animation: wave-text 1.4s ease-in-out infinite;
}
.text span:nth-child(1) {
animation-delay: 0.0s;
}
.text span:nth-child(2) {
animation-delay: 0.1s;
}
.text span:nth-child(3) {
animation-delay: 0.2s;
}
.text span:nth-child(4) {
animation-delay: 0.3s;
}
.text span:nth-child(5) {
animation-delay: 0.4s;
}
.text span:nth-child(6) {
animation-delay: 0.5s;
}
.text span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes wave-text {
0% {
transform: translateY(0rem);
}
55% {
transform: translateY(-1.5rem);
}
100% {
transform: translateY(0rem);
}
}
</style>
</head>
<body>
<h2>Adding a Wave Effect to Text Using HTML and CSS</i></h2>
<div class = "text">
<span> H </span>
<span> T </span>
<span> M </span>
<span> L </span>
<span> C </span>
<span> S </span>
<span> S </span>
</div>
</body>
</html>
Users learned how to add a wavy effect to text. In the first method, we used the ‘clip-path’ property to clip the text within a polygonal shape and add the wavy effect. In the second method, we used the ‘radial-gradient’ and ‘background-position’ CSS properties for animation. In the final method, we used the ‘transform’ CSS property to transform the entire text.