CSS Tip

A CSS-only wavy divider

Use modern CSS and add a cool Wavy divider to your section. Only one property and two gradients are needed.

CSS-only wavy divider

.wavy {
  --s: 1.6em; /* the size of the wave */
  --p: .8;    /* the curvature of the wave [0 2] */

  --R: calc(var(--s)*sqrt(var(--p)*var(--p) + 1)) at 50%;
  mask:
    radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%) 
      calc(50% - 2*var(--s)) 0/calc(4*var(--s)),
    radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%) 
      50% calc(-1*var(--s))/calc(4*var(--s)) repeat-x;
}

See the Pen CSS-only wavy divider by Temani Afif (@t_afif) on CodePen.

You can also get the code from my online generator.

More detail: css-tricks.com/how-to-create-wavy-shapes-patterns-in-css

More CSS Tips