How to Create Wave Background using CSS ?
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( 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:
Please Login to comment...