<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення <strong>angle</strong>.</p>
<p>angle в даному прикладі визначає кут повороту фону елементу.</p>
<strong>angle: </strong>
<input type="range" class="input" id="deg" min="0" max="360" value="50" step="1" />deg
<strong>;</strong>
</div>* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 20px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
background: linear-gradient(-140deg, #b05ced, #2908e5 50%, #bce0ee);
padding: 16px;
}
.input {
position: relative;
bottom: -5px;
margin-right: 20px;
width: 75px;
}
$('#deg').on('change', function() {
var deg = $(this).val();
var backValue = 'linear-gradient(' + deg + 'deg, #b05ced, #2908e5 50%, #bce0ee)';
$('.box').css('background', backValue);
});
External CSS
This Pen doesn't use any external CSS resources.