How to Create a Wave Image for a Background using HTML and CSS ?

23 Jan, 2022
This type of background creates uniqueness on your webpage by avoiding regular rectangular sized background or header. The following header design will show your creativity. This design can be achieved in two ways:  
Using ::before and ::after selector on a div element in CSS.
Using SVG in HTML.
Example: This example uses ::before and ::after selector on a div element to create a wave image for background. 
html
<!DOCTYPE html><html>     <head>    <title>        How to Create a Wave Image        for a Background using CSS?       </title>         <style>        .wave {            position: absolute;            top: 0px;            left: 0px;            right: 0px;            height: 70px;            width: 100%;            background: dodgerblue;            z-index: -1;        }        .wave::before {            content: "";            display: block;            position: absolute;            border-radius: 100% 90%;            width: 51%;            height: 75px;            background-color: white;            right: 0px;            top: 35px;        }        .wave::after {            content: "";            display: block;            position: absolute;            border-radius: 100% 90%;            width: 51%;            height: 75px;            background-color: dodgerblue;            left: -8px;            top: 25px;        }    </style></head> <body style="text-align:center;">    <h1 style="color:forestgreen;">        Geeks For Geeks    </h1>         <div class="wave"></div></body> </html>
Output:  
The problem of using before and after is as we have to define their position in pixels thus as the screen height changes its shape changes and so it is not that proper as it seems. So, for that purpose we use SVG in CSS.Example: This example uses SVG to design a wave image for background.  
html
<!DOCTYPE html><html>     <head>    <title>        How to Create a Wave Image        for a Background using CSS?       </title>         <style>        svg {            display: inline-block;            position: absolute;            top: 0;            left: 0;            z-index: -1;        }        .container {            display: inline-block;            position: absolute;            width: 100%;            padding-bottom: 100%;            vertical-align: middle;            overflow: hidden;            top: 0;            left: 0;        }        body {            overflow: hidden;        }    </style></head> <body style="text-align:center;">    <h1 style="color:lawngreen;">        Geeks For Geeks    </h1>         <div class="container">             <!-- Creating a SVG image -->        <svg viewBox="0 0 500 500"            preserveAspectRatio="xMinYMin meet">                         <path d="M0, 100 C150, 200 350,                0 500, 100 L500, 00 L0, 0 Z"                style="stroke:none; fill:dodgerblue;">            </path>        </svg>    </div></body> </html>
Output:  
Example: This example uses SVG to design a wave image for background.  
html
<!DOCTYPE html><html>     <head>    <title>        How to Create a Wave Image        for a Background using CSS?       </title>         <style>        svg {            display: inline-block;            position: absolute;            top: 0;            left: 0;        }        .container {            display: inline-block;            position: absolute;            width: 100%;            padding-bottom: 100%;            vertical-align: middle;            overflow: hidden;            top: 0;            left: 0;        }        body {            overflow: hidden;        }    </style></head> <body style="text-align:center;">    <h1 style="color:white;">        Geeks For Geeks    </h1>         <div class="container">        <svg viewBox="0 0 500 500"            preserveAspectRatio="xMinYMin meet"            style="z-index: -2;">                         <path d="M0, 100 C150, 200 350,                0 500, 100 L500, 00 L0, 0 Z"                style="stroke: none;                fill:rgba(30, 144, 225, 0.5);">            </path>        </svg>    </div>         <div class="container">        <svg viewBox="0 0 500 500"            preserveAspectRatio="xMinYMin meet"            style="z-index:-1;">                         <path d="M0, 80 C300, 0 400,                300 500, 50 L500, 00 L0, 0 Z"                style="stroke: none;                fill:rgba(153, 50, 204, 0.5);">            </path>        </svg>    </div>         <div class="container">        <svg viewBox="0 0 500 500"            preserveAspectRatio="xMinYMin meet"            style="z-index:-3;">                         <path d="M0, 100 C150, 300 350,                0 500, 100 L500, 00 L0, 0 Z"                style="stroke: none;                fill:rgba(220, 20, 60, 0.5);">            </path>        </svg>    </div></body> </html>
Output:  
 
adnanirshad158
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Create a Responsive Navbar using ReactJS
Build a Survey Form using HTML and CSS
Make a div horizontally scrollable using CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type