How to make bubble background using HTML5 and CSS3?

06 Aug, 2021
Water bubble background animation can easily be generated by using HTML, CSS JavaScript. By using HTML5 we will design the basic body part of the page and by CSS3 we will make the bubbles in the background, And with the help of JavaScript, it will move over the whole page from bottom to up.Approach:  
The basic idea is to create a section using <lspan> element, give it a round shape then by using the CSS animation property translateY the bubble can be moved bottom to top along the Y-axis. The following steps can be followed to obtain the desired result. Create the body by using simple HTML tags.
 
Make a section in the body tag and then write something which will show in the body of the page.
 
HTML code: In this section, we will design a simple body structure:  
html
<!DOCTYPE html><html>    <body>        <section>            <h2>GeeksforGeeks</h2>        </section>    </body></html>
CSS Part: By using CSS we can make the bubbles in the background. First of all, we fixed the body part with margin, padding, and font style. Then we will try to fix the background and use some attributes like position, height, width, background color, text position, etc. Then we will try to make the bubbles in the background. As it’s a kinda hover effect so we will use span and span:before to fix the position of the bubble, then we will fix the background as transparent and give some border as it show like water bubble, then we have to add some animation like “animate 4s linear-gradient” to animate it. And the last of the CSS part we will use @Keyframes animation to move the bubbles along y-axis.
css
<style>    * {        margin: 0;        padding: 0;        font-family: consolas;    }    section {        position: relative;        width: 100%;        height: 100vh;        overflow: hidden;        background: #111;        display: flex;        justify-content: center;        align-items: center;    }    section h2 {        font-size: 10em;        color: #333;    }    section span {        position: absolute;        bottom: -50px;        background: transparent;        border-radius: 50%;          pointer-events: none;        box-shadow: inset 0 0 10px rgba(225, 225, 225, 0.5);        animation: animate 4s linear infinite;    }    sectionspan: before {        content: "";        position: absolute;        width: 100%;        height: 100%;        transform: scale(0.25) translate(-70%, -70%);        background: radial-gradient(#ffffff, transparent);        border-radius: 50%;    }    @keyframes animation {        0% {            transform: translateY(0%);            opacity: 1;        }        99% {            opacity: 1;        }        100% {            transform: translateY(-1200%);            opacity: ;        }    }</style>
JavaScript:  
At the last we use JavaScript to move the bubbles from bottom to top off the page. And it will give a charming and look like alive. We will take create a function named to create a bubble and write some code. we will give it animation and set the timing and at the last, we will add setInterval(createBubble, 100) as the bubbles can move from bottom to top. If we don’t add this the bubble will generate at the bottom part of the page but don’t move to the top but to be continued to generate.
JavaScript Code: here we will see how to move the bubbles:  
javascript
<script type="text/javascript">    function createBubble() {        const section = document.querySelector("Section");        const createElement = document.createElement("span");        var size = Math.random() * 60;          createElement.style.animation =           "animation 6s linear infinite";        createElement.style.width = 180 + size + "px";        createElement.style.height = 180 + size + "px";        createElement.style.left =           Math.random() * innerWidth + "px";        section.appendChild(createElement);          setTimeout(() => {            createElement.remove();        }, 4000);    }    setInterval(createBubble, 100);</script>
Complete Code:  
html
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta name="viewport"               content="width=device-width,                       initial-scale=0.1" />        <style>            * {                margin: 0;                padding: 0;                font-family: consolas;            }            section {                position: relative;                width: 100%;                height: 100vh;                overflow: hidden;                background: #111;                display: flex;                justify-content: center;                align-items: center;            }            section h2 {                font-size: 10em;                color: #333;            }            section span {                position: absolute;                bottom: -50px;                background: transparent;                border-radius: 50%;                  pointer-events: none;                box-shadow: inset 0 0 10px                   rgba(225, 225, 225, 0.5);                animation: animate 4s linear infinite;            }            sectionspan: before {                content: "";                position: absolute;                width: 100%;                height: 100%;                transform: scale(0.25) translate(-70%, -70%);                background:                   radial-gradient(#ffffff, transparent);                border-radius: 50%;            }            @keyframes animation {                0% {                    transform: translateY(0%);                    opacity: 1;                }                99% {                    opacity: 1;                }                100% {                    transform: translateY(-1200%);                    opacity: ;                }            }        </style>    </head>    <body>        <section>            <h2>GeeksforGeeks</h2>        </section>        <script type="text/javascript">            function createBubble() {                const section =                       document.querySelector("Section");                const createElement =                       document.createElement("span");                var size = Math.random() * 60;                  createElement.style.animation =                   "animation 6s linear infinite";                createElement.style.width = 180 + size + "px";                createElement.style.height = 180 + size + "px";                createElement.style.left =                   Math.random() * innerWidth + "px";                section.appendChild(createElement);                  setTimeout(() => {                    createElement.remove();                }, 4000);            }            setInterval(createBubble, 100);        </script>    </body></html>
Output:  
 
arorakashish0911
gulshankumarar231
CSS-Misc
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS