← All elements
<div></div>About this animation
A blue gradient shape that morphs between teardrop and circle by animating four border-radius values.
How it works
One square with a gradient background is rotated by 45 degrees. A keyframe changes all four border-radius values between 100 percent and 50 percent, so the shape morphs between a droplet and a rounded blob while a large soft shadow stays beneath it.
Ways to customise it
- Change the two gradient colours.
- Edit the border-radius percentages in the keyframes.
- Change the 3s duration.
Good to know
A very small example, easy to adapt as a decorative hero shape. It reduces nothing under reduced motion, so add that media query if you place it on a page.
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.