Add waves to your web design using HTML CSS

wave-cover

Do you know adding waves design to your WEBSITE is quite simple now?
Let me explain to you how you could add waves to your website just in 2 minutes.

Add the following HTML to your HTML FIle.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Tutorial</title>
</head>

<body>
    <!-- Wave CONTAINER-->
    <div class="wave-container">

    </div>
</body>

</html>

Now visit the website: https://getwaves.io/

Create a wave of your choice and click on the download button to copy the SVG code.

Create Wave
Create wave!
download-wave

Now pastes that code in the HTML page.

Your final HTML file should look like:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Tutorial</title>
</head>

<body>
    <!-- Wave CONTAINER-->
    <div class="wave-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e7008a" fill-opacity="1" d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,90.7C840,128,960,224,1080,218.7C1200,213,1320,107,1380,53.3L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
    </div>
</body>

</html>

So we’re done now!

final-wave

Happy Learning!

Leave a Reply

Back To Top