Pure CSS Blob Animation, no svg, no js

#webdev #ai #programming #css

Pure CSS Blob Animation, no svg, no js

Overview

The Blob Effect in Pure CSS is a dynamic, morphing shape animation that creates an organic “liquid blob” appearance. It uses only CSS properties like border-radius, gradients, and keyframe animation — no JavaScript or external libraries required.

This effect can be used for profile frames, loading animations, or background decorations in modern, vibrant web designs.

<h1>Blob Effect in Pure CSS</h1>

<div class="blob-loader">
  <img src="https://img.freepik.com/free-photo/front-view-beautiful-woman_23-2148574859.jpg" />
</div>

Explanation:

The main container that forms the animated blob.
Optional image inside the blob (you can replace or remove it).
A simple heading for demonstration.

Key Properties:

border-radius — Creates the irregular, “blobby” shape.
linear-gradient — Applies a two-color gradient for visual depth.
animation: morphBlob — Smoothly morphs the blob over time.
filter: drop-shadow — Adds glowing depth around the blob.
overflow: hidden — Keeps the image inside the blob shape.

🎨 CSS Styling

body {
  background: #f44336;
  font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
  text-align: center;
}
.blob-loader {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
  filter: drop-shadow(0 0 12px #ff416c);
  animation: morphBlob 8s ease-in-out infinite;
  position: relative;
  margin: 4rem auto;
  cursor: pointer;
  transition: filter 0.3s;
  border: 5px dotted black;
  overflow: hidden;
}

/* Glowing layers with pseudo elements */
.blob-loader::before,
.blob-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(20px);
  opacity: 0.6;
  animation: morphBlob 8s ease-in-out infinite alternate;
  z-index: -1;
}

.blob-loader::before {
  background: #ff416c;
  animation-delay: 0s;
}

.blob-loader::after {
  background: #ff4b2b;
  animation-delay: 4s;
}

@keyframes morphBlob {
  0% {
    border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
  }
  25% {
    border-radius: 64% 36% 52% 48% / 62% 38% 64% 36%;
  }
  50% {
    border-radius: 58% 42% 42% 58% / 58% 69% 31% 42%;
  }
  75% {
    border-radius: 42% 58% 58% 42% / 42% 31% 69% 58%;
  }
  100% {
    border-radius: 52% 48% 66% 34% / 38% 64% 36% 62%;
  }
}

/* Speed up morph on hover */
.blob-loader:hover {
  animation-duration: 3s;
  filter: drop-shadow(0 0 24px #fff);
}

.blob-loader:hover::before,
.blob-loader:hover::after {
  animation-duration: 3s;
}

⚙️ How It Works

Morphing Shape: The border-radius property changes smoothly using keyframes.
Depth & Glow: Two blurred pseudo-elements (::before, ::after) create layered color glows.
Hover Animation: The morph speed increases, and the glow brightens on hover.
Pure CSS: No JavaScript — just creative use of gradients, filters, and border manipulation.

codepen demo

DEV Community

Pure CSS Blob Animation, no svg, no js

Top comments (0)