Displaying the Result of Your Nested Color Code

  function chgrad() {
    // Get the selected radio button
    var selectedRadio = document.querySelector('input[name="radioGroup"]:checked');
  
    // Get colors and rotation values
    var red1 = document.getElementById('red1').value;
    var green1 = document.getElementById('green1').value;
    var blue1 = document.getElementById('blue1').value;
  
    var red2 = document.getElementById('red2').value;
    var green2 = document.getElementById('green2').value;
    var blue2 = document.getElementById('blue2').value;
  
    var rot = document.getElementById('rot').value;
  
    // Set background-size to cover before setting background-image
    document.getElementById('wrapper').style.backgroundSize = 'cover';
  
    // Create gradient string based on selected radio button
    var gradientString;
    if (selectedRadio.value === 'option1') {
      gradientString = "-webkit-linear-gradient(" + rot + "deg, rgb(" + red1 + "," + green1 + "," + blue1 + "))";
    } else if (selectedRadio.value === 'option2') {
      gradientString = "-webkit-linear-gradient(" + rot + "deg, rgb(" + red1 + "," + green1 + "," + blue1 + "), rgb(" + red2 + "," + green2 + "," + blue2 + "))";
    }
  
    // Apply the gradient
    document.getElementById('wrapper').style.backgroundImage = gradientString;
  }

 .wrapper {
    width: 100%;
    height: 50px;
    background-color: #000;
    background-image: transparent;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="wrapper" class="wrapper"></div>

    <div class="btn-radio">
        <input type="radio" id="radio1" name="radioGroup" value="option1" checked>
        <label for="radio1">One colors</label>
    </div>

    <div class="btn-radio">
        <input type="radio" id="radio2" name="radioGroup" value="option2">
        <label for="radio2">Two colors</label>
    </div>

    <div class="rotate-change-main">
        <label for="rot">Rotate</label>
        <input type="range" min="0" max="360" oninput="chgrad()" value="0" id="rot">
    </div>

    <br>

    <div id="range_color1" class="range-color">
        <label for="red1">Red</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="red1" value="0" /><br />
        <label for="green1">Green</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="green1" value="0" /><br />
        <label for="blue1">Blue</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="blue1" value="0" /><br />
    </div>

    <br>

    <div id="range_color2" class="range-color">
        <label for="red2">Red</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="red2" value="0" /><br />
        <label for="green2">Green</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="green2" value="0" /><br />
        <label for="blue2">Blue</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="blue2" value="0" /><br />
    </div>