Animated Background Effect

In this tutorial I will show you how to create animated background effect using Elementor Pro. Here I will use few line of HTML and CSS code. Will not use any more extra plugin. So your site will be overloaded.

Essential Links

Get Domain & Webhosting(60% off)

Get Elementor Pro

html code

CSS code

Copy this HTML Code


<div class="bubbles">    
  <span style="--i:11"></span>  
  <span style="--i:12"></span>    
  <span style="--i:24"></span>    
  <span style="--i:10"></span>    
  <span style="--i:14"></span>    
  <span style="--i:23"></span>    
  <span style="--i:18"></span>    
  <span style="--i:16"></span>    
  <span style="--i:19"></span>    
  <span style="--i:20"></span>    
  <span style="--i:22"></span>    
  <span style="--i:25"></span>    
  <span style="--i:18"></span>    
  <span style="--i:21"></span>    
  <span style="--i:15"></span>    
  <span style="--i:13"></span>    
  <span style="--i:26"></span>    
  <span style="--i:17"></span>    
  <span style="--i:13"></span>    
  <span style="--i:28"></span>        
  <span style="--i:11"></span>    
  <span style="--i:12"></span>    
  <span style="--i:24"></span>    
  <span style="--i:10"></span>    
  <span style="--i:14"></span>    
  <span style="--i:23"></span>    
  <span style="--i:18"></span>    
  <span style="--i:16"></span>    
  <span style="--i:19"></span>    
  <span style="--i:20"></span>    
  <span style="--i:22"></span>    
  <span style="--i:25"></span>    
  <span style="--i:18"></span>    
  <span style="--i:21"></span>    
  <span style="--i:15"></span>    
  <span style="--i:13"></span>    
  <span style="--i:26"></span>    
  <span style="--i:17"></span>    
  <span style="--i:13"></span>    
  <span style="--i:28"></span>
</div>

Copy CSS Code

:root{
    --color1: #4AF4D1;
    --color1-shadow: #1C564A;
    --color2: #F03131;
    --color2-shadow: #7D1F1F;
    --size: 20px;
}

selector .bubbles span{
    background: var(--color1);
    width: var(--size);
    height: var(--size);
    display: inline-block;
    border-radius: 50%;
    margin: 0 5px;
    box-shadow: 0 0 0 6px var(--color1-shadow),
    0 0 50px var(--color1),
    0 0 100px var(--color1);
    animation:animate 20s linear infinite;
    animation-duration: calc(125s/var(--i));
}

selector .bubbles span:nth-child(even){
    background: var(--color2);
    box-shadow: 0 0 0 6px var(--color2-shadow),
    0 0 50px var(--color2),
    0 0 100px var(--color2);
    
}
@keyframes animate{
    0%{
        transform: translateY(100vh) scale(0);
    }
    100%{
        transform: translateY(-10vh) scale(1);
    }
}

Essential Links

Need this built rather than explained?