<div class="gradient dithering">
  <h1>CSS Gradients Dithering</h1>
  <h2>— or, how to avoid banding —</h2>
  <button class="button is-off">Turn off</button>
</div>

body {
  font-family: "Avenir", sans-serif;
  text-align: center;
  color: #fff;
}
.gradient {/* Rectangle 7: */
  height: 10000px;
  background-image: linear-gradient(#3023AE 0%, #53A0FD 48%, #B4EC51 100%);
}

.gradient.dithering:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEQyMjdENDk5MkIwMTFFNUI2QkY5QTc5RDEyMDYwMzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEQyMjdENEE5MkIwMTFFNUI2QkY5QTc5RDEyMDYwMzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RDIyN0Q0NzkyQjAxMUU1QjZCRjlBNzlEMTIwNjAzOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RDIyN0Q0ODkyQjAxMUU1QjZCRjlBNzlEMTIwNjAzOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmu0KO0AAADrSURBVHjajFTRCsQgDNNxfciDcP//qzvYbWNyNab1CuLo0hrT2nocR7ms1opz+5xr777MTrxJ7OMA4e3Z4fcL21cQj+64EjRBxPhwSogpwv20AGSEfdNB/htF6GV0kGcD4WsDnq5glBB8bWLl/zVO2BYBWdFmoRPzBes3QCCP+YSRdoqpicKAGUIwaIvEhfBlYih10dak1oGGJisY9+7PHySECFbSTL27CaZ9SESv4R4g5N9LkCh6miZYQWITDQv3W9D0GHzMMOlDJDKEvfUPo0iC27ZB0LEYXnAO7DEv0ln21nLIJjO1fAUYAFFrtQrX4oQRAAAAAElFTkSuQmCC) repeat;
}

h1 {
  position: fixed;
  top: calc(20% + 50px);
  width: 100%;
  font-size: 40px;
}

h2 {
  position: fixed;
  top: calc(20% + 100px);
  width: 100%;
  font-size: 22px;
}

button {
  font-size: 14px !important;
  position: fixed;
  top: calc(20% + 140px);
  font-size: 22px;
  width: 80px;
  margin-left: -40px;
  border: 1px solid #fff;
  color: #fff;
  outline: none;
  background: transparent;
  border-radius: 100px;
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

$('.button').click(function(){
  if($('.button').hasClass('is-off')) {
    $('.button').removeClass('is-off');
    $('.button').addClass('is-on');
    $('.gradient').addClass('dithering');
    $('.button').html('Turn on');
  }
  else {
    $('.button').removeClass('is-on');
    $('.button').addClass('is-off');
    $('.gradient').removeClass('dithering');
    $('.button').html('Turn off');
  }
});