Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Random gradient background color

i'm trying to get a random gradient background (between 4 colours) on each section. This is my code:

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,90);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)]+" "+(100-firstGradient)+"%)"
        );
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }
section{
  display:block;
  height:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

It is so random. Sometimes i get results like this: enter image description here

When result should be something like this:

enter image description here

like image 554
KaSkuLL Avatar asked Oct 28 '22 10:10

KaSkuLL


1 Answers

If you dont try to calculate the remaining % then it seems to work as you expect

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,90);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)] + ")"
        );
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }
section{
  display:block;
  height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>
like image 88
Jamiec Avatar answered Nov 12 '22 17:11

Jamiec