CSS Shape Animator

100% Free · Client-Side

Generate animated, morphing CSS shapes and SVG waves. Apply them as image masks, section dividers, or animated backgrounds with auto-generated CSS keyframes.

Masked Area Preview

CSS Keyframes Code

@keyframes morphShape {
  0% { clip-path: path('M 430.16 250.00 C 440.12 329.33, 428.43 405.30, 361.53 443.17 C 294.62 481.04, 241.30 449.78, 162.54 401.48 C 83.78 353.19, 46.43 325.63, 46.50 250.00 C 46.56 174.37, 94.00 130.00, 162.80 98.96 C 231.59 67.92, 254.84 88.08, 321.68 125.84 C 388.52 163.60, 420.20 170.67, 430.16 250.00'); }
  33% { clip-path: path('M 415.91 250.00 C 414.10 339.62, 413.48 384.60, 349.86 422.96 C 286.23 461.32, 226.38 446.67, 161.42 403.43 C 96.45 360.19, 89.63 326.07, 90.01 250.00 C 90.39 173.93, 96.14 145.55, 162.92 99.17 C 229.69 52.79, 293.86 26.77, 357.11 64.48 C 420.36 102.19, 417.72 160.38, 415.91 250.00'); }
  67% { clip-path: path('M 433.21 250.00 C 431.63 304.59, 377.51 315.91, 309.88 353.72 C 242.25 391.52, 221.55 427.14, 162.70 401.21 C 103.84 375.28, 74.77 326.15, 74.46 250.00 C 74.15 173.85, 101.01 125.27, 161.44 96.61 C 221.87 67.95, 248.25 97.00, 316.19 135.35 C 384.13 173.70, 434.79 195.41, 433.21 250.00'); }
  100% { clip-path: path('M 422.02 250.00 C 415.75 332.88, 397.79 356.62, 333.17 394.06 C 268.55 431.50, 231.57 435.77, 163.54 399.75 C 95.51 363.74, 60.92 324.67, 61.03 250.00 C 61.15 175.33, 89.71 147.93, 164.01 101.06 C 238.31 54.20, 293.73 25.31, 358.23 62.54 C 422.73 99.77, 428.28 167.12, 422.02 250.00'); }
}

.animated-shape {
  width: 500px;
  aspect-ratio: 1;
  animation: morphShape 4s ease-in-out infinite alternate;
}

Animation Mode

Upload Image

Drop an image here (or click to browse)

Select an image to preview the animated mask

Max 20MB per file

Base Shape

Size Reference (px)500px

Complexity (Points)6

Randomness (Wobble)40%

Animation Settings

Speed (Duration)4s

Keyframe Steps4

Higher = more complex CSS, smoother morph.

Animated CSS & SVG Shape Generator

Tired of static designs? Our **CSS Shape Animator** automatically creates complex mathematical path sequences that morph beautifully over time. Using the power of CSS `@keyframes` and SVG SMIL animations, you can easily integrate fluid background blobs, rippling section dividers, and shifting image masks directly into your website.

Image Masks

Generate a looping morphing blob and apply it as a CSS clip-path to perfectly mask your profile pictures or hero images.

Fluid Section Dividers

Export responsive inline SVGs with smooth, non-stop wave animations to separate content sections beautifully.

Background Gradients

Create soft, floating background blobs filled with vibrant gradients that slowly shift to add life to your pages.

Zero Dependencies

No heavy animation libraries required. The generated CSS and SVG code runs natively and efficiently in the browser.

Frequently Asked Questions

1. Why use CSS path() for morphing?

Using CSS `@keyframes` with `clip-path: path()` allows you to animate organic shapes directly in CSS, hardware-accelerated by the browser. It perfectly masks images or `div` containers without needing embedded SVG tags.

2. Why do the paths need exact points?

For a smooth CSS or SVG morph animation, the start and end paths must have the exact same number of points (commands). This tool dynamically generates perfectly matching paths across all frames.

3. How do I use the Divider code?

For section dividers, we output raw SVG code with an embedded `` tag. This is because SVGs scale perfectly across full-width sections using `preserveAspectRatio='none'`.