• HTML
• CSS

HTML

<div class="contenedor-uno">
    <div class="contenedor-dos">
        <div class="pompa1"></div>
        <div class="pompa2"></div>
    </div>
</div>

CSS

body{
    padding:0;
    margin:0;
}

.contenedor-uno{
    position:relative;
    width:100vw;
    height:100vh;
    background:linear-gradient(120deg,orange,fuchsia);
}

.contenedor-dos{
    position:relative;
    width:100%;
    height:100%;
    filter:contrast(20);
}

.contenedor-dos:before{
    content:"";
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background:rgb(0,0,250,0.2);
}

.pompa1{
    position:absolute;
    width:10vw;
    height:10vw;
    background:yellow;
    filter:blur(12px);
    top:15%;
    left:40%;
}

.pompa2{
    position:absolute;
    width:5vw;
    height:5vw;
    background:yellow;
    filter:blur(12px);
    top:17%;
    left:40%;
    border-radius:20vw;
    animation: mover 5s infinite alternate;
}

@keyframes mover{
    0%{left:10%;}
    100%{left:70%;}
}

/* 
    Fuente:https://www.youtube.com/watch?v=ozyEdqQQK9U 
    
    Si el código no cohencide con el original es porque se 
    agregó algunas mejoras al tamaño de la clase 'contenedor-dos'
    (No especifica el tamño de la misma) y
    al top de 'pompa2' para que sea vea mejor.
    
*/