How do I use a template-literal within hue-rotate()

Soup 0
Viewed 15

I'm new to JS but I came across this problem:

var rand = Math.floor(Math.random * 360);
document.getElementById('vanta').style.filter = "hue-rotate(${rand}deg)";

My idea was to rotate the hue randomly every time the user refreshes the page. Is it possible to use a template literal like that? If not how are there other ways to randomly change the background color/hue in vanilla js/css.

javascript css html
1 Answers

You need backticks hue-rotate(${rand}deg) Try Math.random() as well.

var rand = Math.floor(Math.random() * 360);
document.getElementById('vanta').style.filter = `hue-rotate(${rand}deg)`;
<div id="vanta" style="background:red">I am rotated red</div>

IT goldman0
Related