CSS waves effect and CSS animation | CSS waves animation

Css Wava

Today we have developed a CSS waves effect. In the last post, we discussed how to create an Animated Tab Bar in Html and CSS. So, lets us start with how to create waves in HTML and CSS.

Waves in HTML and CSS:

As you can see in the image we created waves in Html and CSS and they are moving up and down.

For the movement of these waves, we have taken the help of HTML and CSS languages. First of all, we have taken a solid background of white colors. Then we have taken another color of green. After that, we divided the page into two sections upper and lower sections. Provided the radius to the upper part from the left and right bottom corners. Then add the animation inside the corners of the upper side. 

In both the upper and lower side we have added the text. This text can be applied using headings from <h1> to <h6>. Then <p> tag can also be used with it for adding the text.

You might like it:

How to create a CSS waves effect?

For creating waves in HTML and CSS we have to download a code editor. The code editor is an IDE and it provides an environment to write the code of any programming language. We will use vs code or sublime text editor or brackets for writing our code.

Source code of HTML:

It is a markup language and it is used to create the skeleton of a website. It is also a part of the website and you can use it in any part of the website. The Code of the Html file is given below and you can use it for this project.

Source code of CSS:

It is a markup language and it is used for designing websites so that they look attractive and responsive across all devices. Its code for design is given below and used for waves in CSS files.

Download source code:

Sometimes it’s difficult for new developers to create Html and CSS files and then connect them with each other using link tags in HTML files. For those, we have created a folder and in this folder all the necessary code files are present. So, download the code file from the below button and they use this code in your project.


As you can see we have applied the wave effect in these sections. The upper layer is moving and showing wave effects in HTML and CSS language. Now change the position of waves. Make the upper part static and enable the below section to show the wave effect.

Thanks for reading this article.

Download Source CodeClick to Download
Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x