<fieldset>
  <legend>Fiddle about with the sliders, why don't you?</legend>
  <p><label for="line-color">Line colour</label>
    <input type="color" id="line-color" name="line-color" value="#0000ff">
  </p>
  <p><label for="wave-background">Background colour</label>
    <input type="color" id="wave-background" name="wave-background" value="#000080">
  </p>
  <p><label for="line-thickness">Line thickness</label>
    <input type="range" id="line-thickness" name="line-thickness" min="2" max="100" value="10">
  </p>  
  <p><label for="wave-width">Wave width</label>
    <input type="range" id="wave-width" name="wave-width" min="10" max="1000" value="200">
  </p>
  <p><label for="wave-height">Wave height</label>
    <input type="range" id="wave-height" name="wave-height" min="10" max="1000" value="100">
  </p>
  <p><a href="https://dev.to/rossangus/simple-wave-pattern-with-css-gradients-29g4" target="_blank">Read the full story on dev.to</a></p>
  </fieldset>
:root {
  /* The width of the tile which repeats */
  --wave-width:  200px;
  /* The height of the tile or the vertical space between peaks */
  --wave-height: 100px;
  /* Colour of the lighter blue wiggly lines */
  --line-color: #00f;
  /* Colour of the background */
  --wave-background: #000080;
  /* Thickness of the wiggly line */
  --line-thickness: 10px;
  /* This is the radius of the circle found outside the light blue line */
  --radius: calc((var(--wave-width) + var(--line-thickness) + var(--line-thickness)) / 4);
}

body {
  color: #fff;
  background: var(--wave-background);
	background-image:
    radial-gradient(
      circle at center top,
      transparent,
      transparent calc(var(--radius) - var(--line-thickness)),
      var(--line-color) calc(var(--radius) - var(--line-thickness)),
      var(--line-color) var(--radius),
      transparent var(--radius),
      transparent
    ),
    radial-gradient(
      circle at right bottom,
      transparent,
      transparent calc(var(--radius) - var(--line-thickness)),
      var(--line-color) calc(var(--radius) - var(--line-thickness)),
      var(--line-color) var(--radius),
      transparent var(--radius),
      transparent
    ),
    radial-gradient(
      circle at left bottom,
      transparent,
      transparent calc(var(--radius) - var(--line-thickness)),
      var(--line-color) calc(var(--radius) - var(--line-thickness)),
      var(--line-color) var(--radius),
      transparent var(--radius),
      transparent
    );
  background-size: var(--wave-width) var(--wave-height);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  transition: background .5s ease;
}

a { color: #fff; }

fieldset, legend {
  background: rgba(0,0,0,.7);
  border: solid 1px rgba(256,256,256,.2);
  padding: .4em 1em;
}

input {
  display: block;
  width: 100%;
}
View Compiled
let root   = document.documentElement;
let inputs = [...document.querySelectorAll('input')];
for (let i = 0; i < inputs.length; i = i + 1) {
  inputs[i].addEventListener('change', updateVar); 
}

function updateVar (e) {
  let varName = e.target.getAttribute('id');
  let varValue = e.target.value;
  if (varName === 'line-thickness' || varName === 'wave-width' || varName === 'wave-height') {
    varValue = varValue + 'px';
  }
  root.style.setProperty('--' + varName, varValue);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.