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

Question

I would like the bottom wave effect on top too! Can anyone show me how it\'s done.

The effect should look the same on the top of where it is placed on the top as wel

Answer 1

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>