How to Create Wave Background using CSS? Last Updated : 14 Nov, 2024 Comments Improve Suggest changes 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 Wave Background using CSS? 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 How to create linear gradient background using CSS ? In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio 4 min read How to Create a Sliding Background Effect Using CSS ? A sliding background effect in CSS creates a smooth, continuous movement of a webpage’s background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java 2 min read How to blur background image using CSS ? CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of a document written in HTML. In this article, we will learn how to blur background images using CSS, along with basic implementation examples. Blurring Background Images with CSSTo blur a background image usi 3 min read Create a Galaxy Background using HTML/CSS In this article, we will see how to create the galaxy background using the HTML & CSS, along with knowing the basic CSS properties used & will understand it through the example. A galaxy background means a small bunch of circles having different sizes with different shades and a dark backgro 3 min read Like