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% - 48px),#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(34.99px at 50% calc(100% + 18px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
Support This Project
?