How to make bubble background using HTML5 and CSS3?

Last Updated : 31 Jul, 2024

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

* {
    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: ;
    }
}

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");
        let 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>