Dreamy Cloud Morph Divider

A fantastic aesthetic divider for dreamy or mindfulness websites. We ditch the static straight lines and instead use massive randomized border-radius blobs overlayed with CSS filter: blur to emulate fluid vapor.

Morphing Boundary Curves

To make a rectangle look organic, you manipulate the 8-point parameter of border-radius.

.cloud-blob {
  background: white;
  filter: blur(10px);
  animation: morphSky 8s ease-in-out infinite alternate;
}

@keyframes morphSky {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
  100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

Check the Live Demo. It genuinely looks like smoke and fog rolling across the line division!