How to Create Wave Background using CSS ?

07 Jul, 2021
The wave background can be easily generated by using before selector. We will use a wave image of .png file format which you can create on your own or can download from here.HTML Code: In this section, we will design the basic structure of the code.  
html
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />             <title>        How to Create Wave Background using CSS ?    </title></head> <body>    <section class="pattern">        <div class="geeks">            <h1>GEEKS FOR GEEKS</h1>        </div>    </section></body> </html>
CSS code: In this section, we will use some CSS property to design the wave background. First we will add a basic background to the section and then use the before selector to set the wave png file on top of our background. 
CSS
<style>    body {        padding: 0%;        margin: 0%;    }    .geeks {        padding: 200px;        text-align: center;    }          section {        width: 100%;        min-height: 500px;    }          .pattern {        position: relative;        background-color: #3bb78f;        background-image: linear-gradient(315deg,                        #3bb78f 0%, #0bab64 74%);    }          .pattern:before {        content: "";        position: absolute;        bottom: 0;        left: 0;        width: 100%;        height: 215px;        background: url(wave.png);        background-size: cover;        background-repeat: no-repeat;    }</style>
Complete code: It is the combination of the above two code section. 
html
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />     <title>        How to Create Wave Background using CSS ?    </title>     <style>        body {            padding: 0%;            margin: 0%;        }         .geeks {            padding: 200px;            text-align: center;        }         section {            width: 100%;            min-height: 300px;        }         .pattern {            position: relative;            background-color: #3bb78f;            background-image: linear-gradient(315deg,                    #3bb78f 0%, #0bab64 74%);        }         .pattern:before {            content: "";            position: absolute;            bottom: 0;            left: 0;            width: 100%;            height: 250px;            background: url(https://media.geeksforgeeks.org/wp-content/uploads/20200326181026/wave3.png);            background-size: cover;            background-repeat: no-repeat;        }    </style></head> <body>    <section class="pattern">        <div class="geeks">            <h1>GEEKS FOR GEEKS</h1>        </div>    </section></body> </html>
Output:  
 
akshaysingh98088
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.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property