The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern


  1. Vladimir Sobolev
    Permalink to comment#

    Sometimes script make wrong string, 5 chars only.

    • Eliazer
      Permalink to comment#

      This should fix this problem, (it is also more readable).


  2. Andrew
    Permalink to comment#

    Hi all sorry to be dense but how do I integrate this into CSS code as the example has done?

    Many thanks,


  3. Dennis
    Permalink to comment#

    felt inspired for something small but fun.

    var ds = [];
    function addtods(nodes) {
    	for (var i in nodes) {
    setInterval(function () {
    	ds = [];
    	addtods(document.getElementsByTagName('input')); = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16); = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
    	for (var i in ds) {
    		if (ds[i] && ds[i].style) {
    			ds[i].style.backgroundColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
    			ds[i].style.color = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
    			ds[i].style.borderColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
    }, 10);
    • Michael
      Permalink to comment#

      Your code didn’t work for me so I rewrote it for fun

      var elements ="*"))
        , styleElements = ["h1", "a", "div", "section", "p", "ul", "li", "h2", "h3", "h4", "h5", "h6", "article", "aside", "footer", "span"]
      elements = elements.filter(function(element){
        if ( styleElements.indexOf(element.nodeName.toLowerCase()) &gt; -1 ) return true
      var colors = function() {
        elements.forEach(function(element) {
 = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
 = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
 = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
        window.setTimeout(colors, 1000)
    • Michael
      Permalink to comment#

      and then I realized it didnt work because the preview escapes less than signs :/

      Oh well. Awesome Idea :)

  4. Brenden
    Permalink to comment#

    A function you could use is this:

    function getRandomColor() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.round(Math.random() * 15)];
            return color;

    There is a preview of it here, just click the button:

  5. royi
    Permalink to comment#

    because you using floor , you will never get the last value of FFFFFF


  6. Basil
    Permalink to comment#

    How could I use this function to set a value in my CSS file?

    I created a a file called randomcolor.js
    var @randomColor = Math.floor(Math.random()*16777215).toString(16);

    and then in my variables.less file I tried
    @adjacent-color: ‘#’ + @randomColor

    I also just tried doing
    @adjacent-color: ‘#’+(Math.random()*0xFFFFFF<<0).toString(16);

  7. Owen
    Permalink to comment#

    But you’re doing it with script. This is “”, right? Not Javascript tricks or PHP tricks!

    What I want to know is, how can you put the random number into the CSS file?


    color: white;
    background-color: (random number generator here);

    Even better would be to incorporate transitions/transforms and you could have constantly changing background colours purely done within CSS – no script necessary!

  8. Subin

    Please update the code with

    That works in the all cases

  9. Simon
    Permalink to comment#

    can somebody help to get the code into joomla application? i have no idea of javascript :-)

  10. Chris
    Permalink to comment#

    Oh! Please! I stumbled upon this and I need it!

    I want to make the menu items automatically change color so they draw the visitor’s attention.

    Ideally I could set hex values, transition speed and intervals. An added bonus would be having each menu item change color sequentially.

    E.g.: speed: 15ms, fff=5000ms, ff0=250ms, fcf=250ms, f90=250ms

    Wow! Please help?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed