← All elements
<div class="blob"></div>About this animation
An organic gradient blob that continuously changes form by animating all four border-radius values.
How it works
A square element gets a gradient background and an animated border-radius. Using eight values, a horizontal and a vertical radius for each corner, the keyframes move between three different shapes, and ease-in-out interpolation morphs the outline smoothly. A soft box-shadow glow completes the effect.
Ways to customise it
- Change the gradient stops for a different palette.
- Edit the radius percentages for rounder or more angular shapes.
- Slow the animation by raising the 7s duration.
Good to know
It animates border-radius, which repaints, so use it sparingly on pages with many animations. It is disabled under prefers-reduced-motion and has no accessibility content of its own.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.