CSS
body{
background-color: #7BCDFF;
background-image: radial-gradient(farthest-side at 50% 148%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.15) 58%, rgba(0, 0, 0, 0.15) 61%, rgba(0, 0, 0, 0) 66%), radial-gradient(farthest-side at 50% -48%, rgba(0, 0, 0, 0) 53%, rgba(0, 0, 0, 0.15) 58%, rgba(0, 0, 0, 0.15) 61%, rgba(0, 0, 0, 0) 85%);
background-size: 70px 30px; /* width and height of the wave can be set here, default 70px 30px */
background-position: 0px 0px, 35px 0px; /* the horizontal position of the second background must be equal to half the wave width, default 35px */
}
.wave, .wave2{
width: 100%;
height: 20px; /* height of the wave can be adjusted here but must be a multiple of 2, default 20px */
background-image: radial-gradient(farthest-side at 50% 148%, #000 61%, rgba(0, 0, 0, 0) 66%), radial-gradient(farthest-side at 50% -48%, rgba(0, 0, 0, 0) 53%, #000 58%);
background-size: 50px 50%; /* width of the wave can be set here, default 50px */
background-position: 0px 0px, 25px 100%; /* the horizontal position of the second background must be equal to half the wave width, default 25px */
background-repeat: repeat-x;
}
.wave2{
background-image: radial-gradient(farthest-side at 50% 148%, rgba(0, 0, 0, 0) 53%, #000 58%, #000 61%, rgba(0, 0, 0, 0) 66%), radial-gradient(farthest-side at 50% -48%, rgba(0, 0, 0, 0) 53%, #000 58%, #000 61%, rgba(0, 0, 0, 0) 66%);
}