How to create a skewed background using CSS ?

How to Create Wave Background using CSS?

Last Updated : 14 Nov, 2024

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-element

To 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>

Output

Output — Wave Background

How to create a skewed background using CSS ?

S

sirohimukul1999

Improve

Article Tags :

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

How to create a skewed background using CSS ?

A skewed background design enhances a website's visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site's layout.ApproachHTML Structure - Sectio

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

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

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

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

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

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

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

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