Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Liquid

Bubble Rise

Translucent bubbles rising with organic movements.

CSSAnimationParticles
Bubble Rise
See it live (free account) →

The code

A glimpse of the source:

index.html
<div class="bubble-container" id="bubble-container">
    <!-- Bubbles added by JS -->
    <div class="bubble" style="width: 30.2983px; height: 30.2983px; left: 33.7572%; animation-duration: 5.17923s; animation-delay: 1.78081s;">
    </div>
    <div class="bubble" style="width: 49.7691px; height: 49.7691px; left: 6.38587%; animation-duration: 4.38331s; animation-delay: 1.85208s;">
    </div>
    <div class="bubble" style="width: 38.0812px; height: 38.0812px; left: 36.6408%; animation-duration: 6.66234s; animation-delay: 1.59819s;">
    </div>
    <div class="bubble" style="width: 10.9047px; height: 10.9047px; left: 59.8891%; animation-duration: 5.9666s; animation-delay: 0.167667s;">
    </div>
🔒 Unlock the full code

Full HTML + CSS + JS, copy-paste-ready — with 800 more Premium effects.

Concrete use cases

A few real contexts where Bubble Rise shines:

How it works

CSS + a lightweight vanilla JavaScript script (no dependency). It relies on a @keyframes animation and CSS transforms.

Make it yours

You can tweak:

Add it in 3 steps

  1. Paste the HTML where you want the effect on your page.
  2. Add the CSS to your stylesheet (or in a <style> tag).
  3. Add the small JavaScript snippet before </body> — done.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Liquid effects

Dripping TextWave SurfaceLiquid ButtonLava Lamp
Browse all Liquid effects →

FAQ

Is the code free?

This effect is part of the Premium library (801 effects, copy-paste-ready code). Around 70 effects are free.

How do I add it to my project?

Copy the HTML, CSS and JS and paste them in. No dependencies, works with any framework.

Does it work on mobile?

Yes — the effects are responsive and degrade gracefully.