I have a CSS linear-gradient background added to a large div.
I'm planning to use this to create a complex pattern of strips, so I want to check how many stripes I can add before I invest more time on it.
I noticed that if I have a div with up to 60 gradients, they behave as expected: the color boundaries are sharp if the stops are the same between adjacent colors.
div {
height: 300px;
width: 1000px;
}<div style="background: linear-gradient(to left, lime 0px, red 0px, red 10px, cyan 10px, cyan 20px, yellow 20px, yellow 30px, lime 30px, lime 40px, red 40px, red 50px, cyan 50px, cyan 60px, yellow 60px, yellow 70px, lime 70px, lime 80px, red 80px, red 90px, cyan 90px, cyan 100px, yellow 100px, yellow 110px, lime 110px, lime 120px, red 120px, red 130px, cyan 130px, cyan 140px, yellow 140px, yellow 150px, lime 150px, lime 160px, red 160px, red 170px, cyan 170px, cyan 180px, yellow 180px, yellow 190px, lime 190px, lime 200px, red 200px, red 210px, cyan 210px, cyan 220px, yellow 220px, yellow 230px, lime 230px, lime 240px, red 240px, red 250px, cyan 250px, cyan 260px, yellow 260px, yellow 270px, lime 270px, lime 280px, red 280px, red 290px, cyan 290px, cyan 300px, yellow 300px, yellow 310px, lime 310px, lime 320px, red 320px, red 330px, cyan 330px, cyan 340px, yellow 340px, yellow 350px, lime 350px, lime 360px, red 360px, red 370px, cyan 370px, cyan 380px, yellow 380px, yellow 390px, lime 390px, lime 400px, red 400px, red 410px, cyan 410px, cyan 420px, yellow 420px, yellow 430px, lime 430px, lime 440px, red 440px, red 450px, cyan 450px, cyan 460px, yellow 460px, yellow 470px, lime 470px, lime 480px, red 480px, red 490px, cyan 490px, cyan 500px, yellow 500px, yellow 510px, lime 510px, lime 520px, red 520px, red 530px, cyan 530px, cyan 540px, yellow 540px, yellow 550px, lime 550px, lime 560px, red 560px, red 570px, cyan 570px, cyan 580px, yellow 580px, yellow 590px, lime 590px, lime 600px, red 600px, red 610px, cyan 610px, cyan 620px, yellow 620px, yellow 630px);" />
But if I add just one more , red 630px, red 640px at the end, then I get this:
div {
height: 300px;
width: 1000px;
}<div style="background: linear-gradient(to left, lime 0px, red 0px, red 10px, cyan 10px, cyan 20px, yellow 20px, yellow 30px, lime 30px, lime 40px, red 40px, red 50px, cyan 50px, cyan 60px, yellow 60px, yellow 70px, lime 70px, lime 80px, red 80px, red 90px, cyan 90px, cyan 100px, yellow 100px, yellow 110px, lime 110px, lime 120px, red 120px, red 130px, cyan 130px, cyan 140px, yellow 140px, yellow 150px, lime 150px, lime 160px, red 160px, red 170px, cyan 170px, cyan 180px, yellow 180px, yellow 190px, lime 190px, lime 200px, red 200px, red 210px, cyan 210px, cyan 220px, yellow 220px, yellow 230px, lime 230px, lime 240px, red 240px, red 250px, cyan 250px, cyan 260px, yellow 260px, yellow 270px, lime 270px, lime 280px, red 280px, red 290px, cyan 290px, cyan 300px, yellow 300px, yellow 310px, lime 310px, lime 320px, red 320px, red 330px, cyan 330px, cyan 340px, yellow 340px, yellow 350px, lime 350px, lime 360px, red 360px, red 370px, cyan 370px, cyan 380px, yellow 380px, yellow 390px, lime 390px, lime 400px, red 400px, red 410px, cyan 410px, cyan 420px, yellow 420px, yellow 430px, lime 430px, lime 440px, red 440px, red 450px, cyan 450px, cyan 460px, yellow 460px, yellow 470px, lime 470px, lime 480px, red 480px, red 490px, cyan 490px, cyan 500px, yellow 500px, yellow 510px, lime 510px, lime 520px, red 520px, red 530px, cyan 530px, cyan 540px, yellow 540px, yellow 550px, lime 550px, lime 560px, red 560px, red 570px, cyan 570px, cyan 580px, yellow 580px, yellow 590px, lime 590px, lime 600px, red 600px, red 610px, cyan 610px, cyan 620px, yellow 620px, yellow 630px, red 630px, red 640px);"/>
Note that the boundary between colors is now a gradient instead of being sharp.
What is going on? Is this a hard limit I'm hitting or I'm doing something wrong, and is there a way to have sharp edges with more than 60 stops?
Thanks!