CSS Background Gradient Color Animation CSS and Tutorial.

3 Oct, 2022

Creating a Background Color Animation using HTML and CSS. Follow the Step by Step guide or Watch YouTube Video for Code.

Step 1: Create an bganimation.html file and write basic HTML5 blocks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0" />
    <title>Background Animation</title>
    
  </head>
  <body>
  
  </body>
</html>

Step 2: Now, create one parent 'div' and three child 'div' with different classes.

<div class="box">
    <div class="mbox"></div>
    <div class="ibox"></div>
    <div class="ibox2"></div>
</div>

Step 3: Final Step, Flex the main box to centre make it relative, then make there two child absolute to it add effect as below code that's it.

.box{
  position: relative;
  margin: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mbox{
  padding: 5em;
  z-index: 1;
  background-color: white;
}
.ibox{
  padding: 5.1em;
  position: absolute;
  filter: blur(2px);
  transform: skew(0,170deg);
  opacity: .8;
  background-color: rgb(14, 18, 241);
  animation: skew 2s infinite alternate;
}
.ibox2{
  padding: 5.1em;
  position: absolute;
  transform: skew(10deg);
  filter: blur(2px);
  opacity: .8;
  background-color: rgb(255, 25, 255);
  animation: skew2 2s infinite alternate;
}

@keyframes skew {
  0% {
      transform: skew(0,170deg);
  }
  100% {
      transform: skew(0, 190deg);
  }
}
@keyframes skew2 {
  0% {
      transform: skew(10deg);
  }
  100% {
      transform: skew(-10deg);
  }
}

Done!

Pro Tips: For Better and Different colours you can edit the two ibox child for animated background colour.

Thanks for Reading, Follow for more tutorials like this on Instagram & YouTube. or Checkout other Blogs.

Blog

Step 1: Create an bganimation.html file and write basic HTML5 blocks.

Step 2: Now, create one parent 'div' and three child 'div' with different classes.

Step 3: Final Step, Flex the main box to centre make it relative, then make there two child absolute to it add effect as below code that's it.

0 Replies so far - Add your comment