Making an Infinitely Changing CSS Variable

September 2025

This post is currently a question.

I'm working on a project where I want to have some CSS variables change constantly. I'm doing it with a setTimeout() call that loops back on itself.

HTML

<div class="changling">Change is welcome</div>

Output

Change is welcome

CSS

:root {
  --hue: 190;
}

.changling {
  color: lch(70% 70 var(--hue));
  font-size: 5rem;
  font-weight: 900;
  transition-property: color;
  transition-duration: 3s;
}

JavaScript

function doChange() {
  const newHue = Math.floor(Math.random() *  360);
  document.documentElement.style.setProperty('--hue', newHue );
  if (window.timeout) {
    clearTimeout(window.timeout);
  }
  window.timeout = setTimeout(doChange, 3000);
}

doChange();

Thoughts?

That's doing what I want. Just wondering if there are other options to consider (or if this is gonna blow up in some way I don't know about).

Let me know if you've got info.

Thanks,

-a

end of line