Search⌘ K
Home
Courses
Grokking CSS Design Patterns to Ace Interviews

Morphing Blob Background

Explore how to create a continuously morphing blob background by defining CSS custom properties for multiple polygon shapes and animating them with keyframes. Learn to use clip-path and background gradients to enhance user interfaces with smooth, CSS-only animations.

We'll cover the following...

Problem description

Given an HTML page containing a <div class="blob"></div> element, write CSS to:

  • Define at least four CSS custom properties (--clip1, --clip2, --clip3, and --clip4), each holding a polygon() value describing a distinct blob shape. ...