Floating Blobs Background

<div class="floating-blobs-bg">

  <div class="blob blob-one"></div>
  <div class="blob blob-two"></div>
  <div class="blob blob-three"></div>

  <div class="floating-blobs-content">
    <span>Floating Blobs</span>
    <h2>Soft Shapes with Smooth Motion</h2>
    <p>Animated blurred blobs with pure CSS.</p>
  </div>

</div>

.floating-blobs-bg{
  position:relative;
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:#050914;
}

.blob{
  position:absolute;
  border-radius:50%;

  filter:blur(55px);
  opacity:.55;

  animation:blobFloat 9s ease-in-out infinite alternate;
}

.blob-one{
  width:220px;
  height:220px;

  top:-60px;
  left:-40px;

  background:#22d3ee;
}

.blob-two{
  width:260px;
  height:260px;

  right:-70px;
  top:40px;

  background:#8b5cf6;

  animation-delay:-3s;
}

.blob-three{
  width:200px;
  height:200px;

  bottom:-80px;
  left:35%;

  background:#d946ef;

  animation-delay:-5s;
}

.floating-blobs-content{
  position:relative;
  z-index:2;

  max-width:600px;
  padding:30px;

  text-align:center;
}

.floating-blobs-content span{
  display:inline-block;
  margin-bottom:12px;

  color:#22d3ee;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.floating-blobs-content h2{
  margin:0 0 12px;

  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.floating-blobs-content p{
  margin:0;

  color:#c7d2e5;
  font-size:15px;
}

@keyframes blobFloat{

  0%{
    transform:translate(0,0) scale(1);
  }

  50%{
    transform:translate(35px,-20px) scale(1.08);
  }

  100%{
    transform:translate(-20px,30px) scale(.95);
  }

}

How This Floating Blobs Background Works

The Floating Blobs Background creates a dark section with three large colored shapes that slowly move and scale behind the content. The effect is built entirely with HTML and CSS. Its structure contains a .floating-blobs-bg wrapper, three .blob elements for the decorative shapes, and a .floating-blobs-content block containing the label, heading, and paragraph. The published component does not use JavaScript.

The main .floating-blobs-bg container uses position: relative, allowing each blob to be positioned absolutely within the section. It has a minimum height of 320px and a dark #050914 background. Flexbox centers the content horizontally and vertically, while overflow: hidden clips the parts of the animated blobs that extend outside the container.

All three decorative shapes share the .blob class. border-radius: 50% turns each element into a circle before the blur is applied. The key visual property is filter: blur(55px), which spreads the solid colors outward and removes their sharp edges. Combined with an opacity of .55, this produces soft areas of color instead of clearly defined circles. For more detail about this effect, see the MDN CSS blur documentation.

Each blob has a different size, color, and starting position. .blob-one measures 220px by 220px, uses cyan #22d3ee, and starts partly outside the upper-left corner at top: -60px and left: -40px. Because the parent clips overflow, only part of its blurred color field is visible.

The second blob is larger at 260px by 260px. It uses purple #8b5cf6 and is placed toward the right with right: -70px and top: 40px. The third blob measures 200px by 200px, uses magenta #d946ef, and starts near the lower part of the section with bottom: -80px and left: 35%.

Movement is handled by the shared blobFloat keyframe animation. Every blob uses a nine-second ease-in-out animation that repeats infinitely with the alternate direction. At the first keyframe, the blob remains at translate(0,0) scale(1). At 50%, it moves 35px to the right and 20px upward while scaling to 1.08. At the final keyframe, it moves 20px left and 30px downward while scaling to .95.

The three blobs do not appear to move in perfect synchronization because the second uses animation-delay: -3s and the third uses animation-delay: -5s. These negative delays start those elements at different points in the same animation cycle, creating overlapping movement without defining separate keyframes for every blob.

The .floating-blobs-content block stays above the decorative elements with position: relative and z-index: 2. It is limited to 600px wide, has 30px of padding, and uses centered typography. The label is cyan and uppercase at 12px, the white heading uses a 32px font size, and the paragraph uses 15px text in #c7d2e5.

Customizing the Floating Blobs Background

The existing CSS provides several straightforward values for changing the size, placement, colors, softness, and movement of the blobs.

• Replace the #050914 container background to match a different dark color scheme.
• Change the cyan #22d3ee, purple #8b5cf6, and magenta #d946ef blob colors to create another palette.
• Adjust the 220px, 260px, and 200px dimensions to make individual blobs larger or smaller.
• Modify top, right, bottom, and left values to redistribute the blobs around the section.
• Change filter: blur(55px) to control how soft and spread out the colored shapes appear.
• Adjust the shared .55 opacity to make the blobs more prominent or more subtle.
• Change the 9s animation duration or the -3s and -5s delays to modify the timing between the layers.
• Edit the translate() and scale() values inside blobFloat to change the distance and amount of movement.

Where to Use This Floating Blobs Background

The soft colors and continuous CSS movement work well behind sections where visual interest is useful but the content still needs to remain readable.

• SaaS and software landing-page hero sections.
• Developer portfolio introductions.
• Product or app feature sections.
• Call-to-action blocks with centered content.
• Technology website banners using dark color schemes.
• Signup or newsletter sections that need subtle background movement.
• Creative landing pages where static gradients feel too rigid.

For a more structured animation using curved layers along the bottom of the section, the Gradient Wave Background is a related CodeRipple component. Floating Blobs Background instead distributes its color across three independently offset elements while keeping the animation completely CSS-based.

Frequently Asked Questions

Does the Floating Blobs Background require JavaScript?

No. The published component contains no JavaScript. All positioning, blur, color, movement, and scaling are handled with CSS.

How are the soft blob shapes created?

Each blob starts as a circular HTML element using border-radius: 50%. A 55px CSS blur and .55 opacity soften the circle’s edges and spread its color into the surrounding background.

Why do the blobs appear to move independently?

All three use the same blobFloat animation, but .blob-two starts with a -3s animation delay and .blob-three with -5s. These negative delays place them at different stages of the animation cycle.

How long does the blob animation take?

Each blob uses a nine-second animation with ease-in-out timing, infinite repetition, and alternate direction. The animation changes both translation and scale across its three keyframe stages.

The Floating Blobs Background combines three blurred color layers with offset CSS animation timing, producing continuous background motion without external graphics, SVG paths, or JavaScript.