What is a Blob effect animation in CSS?
A “blob” effect animation in CSS is a visual technique that creates fluid, organic shapes, usually in motion, to simulate the appearance of blobs or ink stains. By using CSS properties like keyframes, border-radius, and transform, you can create these dynamic shapes that warp and resize, adding a modern and eye-catching visual effect to your designs.
Copy the code below and try it out in your project!
<!-- index.html -->
<div class="blob"></div>/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #282C34;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center
}
.blob {
overflow: hidden;
width: 16rem;
height: 16rem;
border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
background: #282C34 url("https://images.pexels.com/photos/775201/pexels-photo-775201.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center;
animation: morph 3.75s linear infinite;
}
@keyframes morph {
0%, 100% {
border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
}
33% {
border-radius: 72% 28% 48% 48% / 28% 28% 72% 72%;
}
66% {
border-radius: 100% 56% 56% 100% / 100% 100% 56% 56%;
}
}