JSFiddle - React, Tailwind, and code Playground
CSS
:root {
--bg-color: linear-gradient();
}
body {
background: var(--bg-color, white);
background-repeat: no-repeat;
min-height: 100vh;
overflow: hidden;
}
JavaScript
(function randomBackground() {
const linearGradients = [
"linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)",
"linear-gradient(to right, #6a3093, #a044ff)",
"linear-gradient(to right, #a8ff78, #78ffd6)",
"linear-gradient(to right, #6d6027, #d3cbb8)",
"linear-gradient(to right, #4da0b0, #d39d38)",
"linear-gradient(to right, #74ebd5, #acb6e5)",
"linear-gradient(to right, #12c2e9, #c471ed, #f64f59)",
"linear-gradient(to right, #4b79a1, #283e51)",
"linear-gradient(to right, #0099f7, #f11712)"
];
const randomColor =
linearGradients[Math.floor(Math.random() * linearGradients.length)];
document.querySelector("body").style.setProperty("--bg-color", randomColor);
}());