Gradient Wave background Using HTML and CSS

Hello Coder! Welcome to Codewithrandom Blog. In this project, we create a Gradient Wave Background Using HTML and CSS. We see a simple wave but today's article is very interesting we use a gradient background wave and it's very attractive and interesting. So let's start with our HTML Code and then write our Css code for Gradient Background Wave.

Html Code Section For Gradient Wave background

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient background with waves</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <body>
        <div>
           <div class="wave"></div>
           <div class="wave"></div>
           <div class="wave"></div>
        </div>
      </body>
</body>

</html>

CSS Code Section For Gradient Wave background

body {
  margin: auto;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: auto;
  background: linear-gradient(
    315deg,
    rgba(101, 0, 94, 1) 3%,
    rgba(60, 132, 206, 1) 38%,
    rgba(48, 238, 226, 1) 68%,
    rgba(255, 25, 25, 1) 98%
  );
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
}

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 200%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.8;
}

.wave:nth-of-type(3) {
  bottom: -2.5em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.9;
}

@keyframes wave {
  2% {
    transform: translateX(1);
  }

  25% {
    transform: translateX(-25%);
  }

  50% {
    transform: translateX(-50%);
  }

  75% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(1);
  }
}

This is code for gradient wave because you see we use blank html tag and do our all wave work using pure Css. Here is a video preview so you can see how awesome this gradient background wave is.

In this video, you can see a Gradient Waves Background. We use only HTML and CSS code for this project Gradient Waves Background. hope you like this project and learn new things from the project.

if you have any confusion Comment below or you can contact us by fill our contact us form form home section.

Code By - Bárbara Rodríguez

written by - Codewithrandom

Top comments (1)

Shantanu Jana • Oct 28

This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
Coworking Space in New Delhi