How to Create Wave Background using CSS? Last Updated : 14 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report A wave background is a design element having wavy patterns or shapes used to add movement in the web pages. The :before pseudo-element can be used to create a wavy background by applying it to an element and using CSS properties like clip-path to create wave shapes.Using :before pseudo-elementTo create a wave background using the :before pseudo-element in CSS, apply it to a container. Set its position to absolute, add a background image of a wave, and adjust its size and placement to create a visually appealing effect. html <!DOCTYPE html> <html lang="en"> <head> <style> body { padding: 0; margin: 0; } .geeks { padding: 200px; text-align: center; color: white; font-family: Arial, sans-serif; } section { width: 100%; min-height: 300px; position: relative; z-index: 1; } .pattern { background-color: #3bb78f; background-image: linear-gradient(315deg, #3bb78f 0%, #0bab64 74%); position: relative; overflow: hidden; /* Ensure no overflow from the ::before element */ } /* Applying ::before pseudo-element for the wave effect */ .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; z-index: -1; /* Keeps the wave behind the content */ } </style> </head> <body> <section class="pattern"> <div class="geeks"> <h1>Code World</h1> </div> </section> </body> </html> OutputWave Background Comment More infoAdvertise with us Next Article How to Create Animated Background using CSS3 ? S sirohimukul1999 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to create texture background using CSS ? Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi 3 min read How to Create Animated Background using CSS3 ? Pre-requisite:Basic html Learn HTMLcss Learn cssYou will need to have a basic knowledge of Keyframes with css Learn Keyframes In this article, we are creating the background animation using CSS. The login form is used as a demo and the main intention to design background animation. HTML code: In thi 3 min read How to Create Custom Banner Background Using CSS ? A Custom Banner Background in CSS refers to a specifically designed or styled background for a webpage banner, often using unique images, colors, gradients, or patterns. It enhances visual appeal and branding by adjusting properties like background-size, and background-position for a tailored look.A 2 min read How to create wave ball effect using CSS? Wave ball effect is a new entry in the world of animation effects that are used in the designing of modern web apps. In this effect, we have some balls which are animated like a wave. Now you can add different elements to it make it unique like a different color for balls and animation-delay or by c 3 min read How to Create a Wave Image for a Background using HTML and CSS ? 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. Exampl 3 min read How to Create Wave Loader using CSS? Creating a Wave Loader using CSS involves designing an animation that mimics wave-like motion, typically used to indicate loading progress. It is achieved through CSS animations, keyframes, and transformations to animate multiple elements sequentially, creating a flowing, wave-like effect.ApproachHT 2 min read Like