Grow your CSS skills. Land your dream job.


  1. Sometimes script make wrong string, 5 chars only.

    • Eliazer
      Permalink to comment#

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


  2. 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. 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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".