Developer
Size
2,026 Kb
Views
4,046

## How do I make an random gradients - js?

What is a random gradients - js? How do you make a random gradients - js? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

## Random Gradients - JS - Script Codes HTML Codes

``````<!DOCTYPE html>
<html >
<body> <script src="js/index.js"></script>
</body>
</html>``````

## Random Gradients - JS - Script Codes CSS Codes

``````html, body { width:100%; height:100%; margin:0; padding:0;
}
div { height: 10px;
}``````

## Random Gradients - JS - Script Codes JS Codes

``````function hslToHex(h, s, l){ var r, g, b; if(s == 0){ r = g = b = l; }else{ function hue2rgb(p, q, t){ if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } r = (r * 255).toFixed(0); g = (g * 255).toFixed(0); b = (b * 255).toFixed(0); var hR = Number(r).toString(16), hG = Number(g).toString(16), hB = Number(b).toString(16); hR = hR.length == 1 ? hR + '0' : hR.length > 2 ? hR + hR : hR; hG = hG.length == 1 ? hG + '0' : hG.length > 2 ? hG + hG : hG; hB = hB.length == 1 ? hB + '0' : hB.length > 2 ? hB + hB : hB; return '#'+hR+hG+hB;
}
for(var i = 1; i <= 48; i++){ var hue = Math.random(); for(var j = 1; j <= 5; j++){ var color = hslToHex(hue, 0.5, j/8 + 0.15), div = document.createElement('DIV'); div.style.background = color; document.body.appendChild(div); }
}``````