[Solved] How can i make this wave effect on both bottom and top

by


You can do one part using the pseudo elements and the other using multiple background:

.wave{
  text-align: center;
  background:
    radial-gradient(circle at 10px 15px, white 12px, transparent 13px) left 0 bottom -5px/40px 20px repeat-x,
    radial-gradient(circle at 10px -5px, transparent 12px, white 13px) left 0 bottom -10px/20px 20px repeat-x,
    linear-gradient(to bottom, sandybrown, chocolate);
  padding:40px 0;
  position: relative;
}
.wave::before,
.wave::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background-repeat: repeat-x;
  transform:scaleY(-1);
}
.wave::before{
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
  <div class="wave">I'm wavy</div>

2

solved How can i make this wave effect on both bottom and top