CSS Tip

Random Wavy Dividers

After the blob shapes, here is another shape we can build using random() to create a unique user experience. A fancy wavy divider!

CSS-only wavy divider

.wavy {
  --n: 13;   /* if you change this, you need to add more points .. we don't have loops in CSS */
  --d: 60px; /* control the depth, can be percentage */
  
  --_r: element-scoped,0px,var(--d);
  --x0: (50%/var(--n) + 000%/var(--n));
  --y0: (100% - random(--0 var(--_r)));
  --x1: (50%/var(--n) + 100%/var(--n));
  --y1: (100% - random(--1 var(--_r)));
  --x2: (50%/var(--n) + 200%/var(--n));
  --y2: (100% - random(--2 var(--_r)));
  --x3: (50%/var(--n) + 300%/var(--n));
  --y3: (100% - random(--3 var(--_r)));
  --x4: (50%/var(--n) + 400%/var(--n));
  --y4: (100% - random(--4 var(--_r)));
  /* etc ... */

  clip-path: shape(from 100% 100%,vline to 0,hline to 0,vline to 100%,
    curve  to calc((var(--x1 ) + var(--x2 ))/2) calc((var(--y1 ) + var(--y2 ))/2) with calc(var(--x1)) calc(var(--y1)),
    smooth to calc((var(--x2 ) + var(--x3 ))/2) calc((var(--y2 ) + var(--y3 ))/2),
    smooth to calc((var(--x3 ) + var(--x4 ))/2) calc((var(--y3 ) + var(--y4 ))/2),
    smooth to calc((var(--x4 ) + var(--x5 ))/2) calc((var(--y4 ) + var(--y5 ))/2),
    /* etc ... */
    smooth to 100% 100%,
  );
}

⚠️ Chromium-only for now ⚠️

See the Pen Top random wavy divider by Temani Afif (@t_afif) on CodePen.

We can adjust the code to have the wave on the top:

.wavy {
  --n: 13;   /* if you change this, you need to add more points .. we don't have loops in CSS */
  --d: 60px; /* control the depth, can be percentage */
  
  --_r: element-scoped,0px,var(--d);
  --x0: (50%/var(--n) + 000%/var(--n));
  --y0: (random(--0 var(--_r)));
  --x1: (50%/var(--n) + 100%/var(--n));
  --y1: (random(--1 var(--_r)));
  --x2: (50%/var(--n) + 200%/var(--n));
  --y2: (random(--2 var(--_r)));
  --x3: (50%/var(--n) + 300%/var(--n));
  --y3: (random(--3 var(--_r)));
  --x4: (50%/var(--n) + 400%/var(--n));
  --y4: (random(--4 var(--_r)));
  /* etc ... */

  clip-path: shape(from 100% 0,vline to 100%,hline to 0,vline to 0,
    curve  to calc((var(--x1 ) + var(--x2 ))/2) calc((var(--y1 ) + var(--y2 ))/2) with calc(var(--x1)) calc(var(--y1)),
    smooth to calc((var(--x2 ) + var(--x3 ))/2) calc((var(--y2 ) + var(--y3 ))/2),
    smooth to calc((var(--x3 ) + var(--x4 ))/2) calc((var(--y3 ) + var(--y4 ))/2),
    smooth to calc((var(--x4 ) + var(--x5 ))/2) calc((var(--y4 ) + var(--y5 ))/2),
    /* etc ... */
    smooth to 100% 0,
  );
}

See the Pen Top random wavy divider by Temani Afif (@t_afif) on CodePen.

Or both top and bottom:

See the Pen Random wavy divider by Temani Afif (@t_afif) on CodePen.

Until better support, you can use my online generator to get a static version: css-generators.com/wavy-divider

More CSS Tips