Setting linear-gradient with javascript [closed]

Question

I am trying to change the background of my website to a linear gradient of different colours with javascript. The background is changing but to a solid colour, not a linear gradient.

I logged the background and it shows the new linear gradient so I "know" it is setting the style.

body {
    padding: 0;
    margin: 0;
    font-family: 'Kosugi Maru', sans-serif;
    background-image: linear-gradient(45deg, rgb(140, 202, 165), 
    rgb(198,159,197), rgb(248, 160, 133), rgb(52,219,216));
}

function generateGradient(one, two, three) {
    let lessOne = one;
    let moreOne = one;
    let lessTwo = two;
    let moreTwo = two;
    let lessThree = three;
    let moreThree = three;

    if (one >= 10) {
        lessOne = one - 10;
    }
    if (two >= 10) {
        lessTwo = two - 10;
    }
    if (three >= 10) {
        lessThree = three - 10;
    }

    if (one <= 245) {
        moreOne = one + 10;
    }
    if (two <= 245) {
        moreTwo = two + 10;
    }
    if (three <= 245) {
        moreThree = three + 10;
    }

    document.getElementsByTagName("body")[0].style.backgroundImage = 'linear-gradient(45deg, rgb(' + lessOne + ',' + lessTwo + ',' + lessThree + '), rgb(' + one + ',' + two + ',' + three + '), rgb(' + moreOne + ',' + moreTwo + ',' + moreThree + '))';
}

Answer 1

I little change your code, maybe that what you need:

  
    <style>
    body {
        padding: 0;
        margin: 0;
        font-family: 'Kosugi Maru', sans-serif;
        background-image: linear-gradient(45deg, rgb(140, 202, 165),
            rgb(198, 159, 197), rgb(248, 160, 133), rgb(52, 219, 216));
    }
    </style>
    <script>
    function generateGradient(one, two, three) {
        let lessOne = one;
        let moreOne = one + 120;
        let lessTwo = two;
        let moreTwo = two + 120;
        let lessThree = three;
        let moreThree = three + 120;

        if ((moreOne + 120) > 255) {
            moreOne = moreOne - 255;
        }
        if ((moreTwo + 120) > 255) {
            moreTwo = moreTwo - 255;
        }
        if ((moreThree + 120) > 255) {
            moreThree = moreThree - 255;
        }

        document.getElementsByTagName("body")[0].style.backgroundImage = 'linear-gradient(45deg, rgb(' + lessOne + ',' + lessTwo + ',' + lessThree + '), rgb(' + one + ',' + two + ',' + three + '), rgb(' + moreOne + ',' + moreTwo + ',' + moreThree + '))';
    }

    generateGradient(10, 100, 245)
    </script>