JSFiddle - React, Tailwind, and code Playground

bubble background

by Csaba Hellinger

HTML

<div class="bg green"></div>
<div class="bg dark"></div>

<div class="blob one"></div>
<div class="blob two"></div>
<div class="blob three"></div>
<div class="blob four"></div>
<div class="blob five"></div>
<div class="blob six"></div>
<div class="blob seven"></div>

CSS

html, body {
    margin: 0;
    overflow: hidden;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.bg.green {
    background: linear-gradient(0deg, #56ab2f, #a8e063);
}

.bg.dark {
    background: radial-gradient(ellipse at 50% 150%, rgba(43,79,23,0.7) 30%, transparent 100%);
}

.blob {
    position: absolute;
    top: 200%;
    border-radius: 50% 50%;
    
    width: 40vh;    
    height: 40vh;
    background: radial-gradient(ellipse at center, lime 20%, transparent 50%);
    opacity: 0.04;
    animation: move-up;
    animation-duration: 3s;
    animation-iteration-count: infinite;    
}

.blob.one {
    width: 40vh;    
    height: 40vh;    
    left: 20%;
    animation-duration: 2s;    
}

.blob.two {
    width: 60vh;    
    height: 60vh;    
    left: 30%;
    animation-duration: 2.4s;
    animation-delay: 0.6s;
}

.blob.three {
    width: 30vh;    
    height: 30vh;    
    left: 40%;
    animation-duration: 1.8s;
    animation-delay: 1s;
}

.blob.four {    
    width: 50vh;    
    height: 50vh;    
    right: 50%;
    animation-duration: 2.2s;
    animation-delay: 0.4s;
}

.blob.five {
    width: 40vh;    
    height: 40vh;    
    right: 40%;
    animation-duration: 2s;
    animation-delay: 1.5s;
}

.blob.six {
    width: 60vh;    
    height: 60vh;    
    right: 30%;
    animation-duration: 2.4s;
    animation-delay: 1.2s;
}

.blob.seven {
    width: 40vh;    
    height: 40vh;    
    right: 20%;
    animation-duration: 2s;    
    animation-delay: 0.3s;    
}

@keyframes move-up {
  0%   { top: 200%; }
  100% { top: -100%; }
}