CSS Generators

Wavy shapes & patterns with CSS

Side



Size of the wave

Curvature of the wave
.box {
  --mask:
    radial-gradient(34.99px at 50% calc(100% - 48.00px),#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(34.99px at 50% calc(100% + 18.00px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
? twitter icon Buy Me A Coffee