Generate random color with pure CSS (no javascript)?

This isn't really possible in pure CSS.

However, using a pre-processor like SASS (example) or LESS (example) can generate random colors for you because they are built using scripting languages. Keep in mind that this value is then not random for each user or visit, unless the CSS file is generated for each user or visit individually (which is less common).


One side note is the possibility for using CSS variables. We can declare a CSS variable by saying:

html {
  --main-bg-color: brown;
}

and use it like so:

html {
  background-color: var(--main-bg-color);
}

Now we can change it using JS:

// From http://stackoverflow.com/a/5365036/2065702
const randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 

document.documentElement.style.setProperty('--main-bg-color', randomColor);

Note that you can also create CSS variables for specific elements, not just the root document element.

Or you could use a completely different way of selecting a random color (like user input). This allows for possibilities like theming.


<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>

Using PHP


I found for you something here, but it uses PHP. I think it's impossible with plain CSS.

Tags:

Css

Colors

Random