<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>background-image</strong>.</p>

<p>Властивість background-image встановлює у якості фону зображення або градієнт. У цьому прикладі Ви мусите вибрати форму градієнту, а також два кольори (які будуть змішуватися). Ми будемо використовувати лінійний градієнт, але Ви можете використуватися будь-який інший Вам відомий.</p>

<strong>background-image: linear-gradient(</strong>
<select class="input" id="select">
  <option value="to top" name="value2" selected>to top</option>
  <option value="to left" name="value2">to left</option>
  <option value="to right" name="value2">to right</option>
  <option value="to bottom" name="value2">to bottom</option>
  <option value="to right" name="value2">to right</option>
  <option value="to top right" name="value2">to top right</option>
  <option value="45deg" name="value2">45deg</option>
</select>,
<input type="color" class="input" id="color1" value="#32321A">,
<input type="color" class="input" id="color2" value="#F74C32">
<strong>);</strong>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
  background-image: linear-gradient( to top, #32321A, #F74C32 );
  background-size: cover;
  background-repeat: no-repeat;
}

.box {
  background-color: #fff;
  padding: 16px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

$('.input').on('change', function() {
  var sel = $('#select').find(":selected").text();
  var col1 = $('#color1').val();
  var col2 = $('#color2').val();
  $('body').css( 'background-image', 'linear-gradient(' + sel + ',' + col1 + ',' + col2 + ')' );
});