Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Design Wave Image in HTML ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 06 Aug, 2021
Improve Article
Save Article

Waves are simple designs that can be generated on an HTML page which enhances the overall look of the website and make it more attractive and designer. These waves can be used in designing the background of the landing pages, Images, responsive buttons, products, and areas of the web pages with the help of CSS and HTML. There can either be a static wave or an animated wave referring to preferences.  

Waves can be created in two ways: 

Pros and Cons: The ::before and ::after selector method asks for exact pixel locations and so we get the dynamic wave and the patterns of the wave keep getting changed. Whereas, SVGs are the most optimized way to get waves displayed on the webpage. It quickly generates consistent-looking wavy patterns for the websites.

HTML code: The following example demonstrates how to design an SVG wave.


<!DOCTYPE html>
        body {
            overflow: hidden;
        svg {
            display: inline-block;
            position: absolute;
            top: 0;
            z-index: -1;
        .container {
            display: inline-block;
            position: absolute;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: middle;
            overflow: hidden;
            top: 0;
            left: 0;
<body style="text-align:center;">
    <h1 style="color:lawngreen;">
        Geeks For Geeks
    <div class="container">
        <!-- Creating a SVG image -->
        <svg viewBox="0 0 500 500"
            preserveAspectRatio="xMinYMin meet">
            <path d="M0, 100 C150, 200 350,
                0 500, 100 L500, 00 L0, 0 Z"
                style="stroke:none; fill:purple;">


Generated Wave

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!