Is it possible to generate random color with pure CSS and without using javascript? It's probably impossible but I'm still curious.
7
-
2It can't be done. CSS is pretty much static.Bart– Bart2013-03-10 21:41:45 +00:00Commented Mar 10, 2013 at 21:41
-
stackoverflow.com/questions/476276/using-javascript-in-cssBlender– Blender2013-03-10 21:43:11 +00:00Commented Mar 10, 2013 at 21:43
-
4@Blender That is not actually pure CSS though.Boaz– Boaz2013-03-10 21:44:04 +00:00Commented Mar 10, 2013 at 21:44
-
@Boaz: Not pure CSS, but it's as close as you can get.Blender– Blender2013-03-10 21:44:40 +00:00Commented Mar 10, 2013 at 21:44
-
1Did you managed to do something ?Thomas Ayoub– Thomas Ayoub2015-04-10 08:42:15 +00:00Commented Apr 10, 2015 at 8:42
|
Show 2 more comments
5 Answers
This isn't yet possible in pure CSS. There's discussion around adding random() to CSS but browser support is basically nonexistent.
In the mean time, 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 alternative to having random in CSS directly is using CSS variables along with a little JS at run time. 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.
2 Comments
sanoj lawrence
there is no color change, any help?
Zach Saucier
@sanojlawrence It's impossible to help blindly. You should probably create a new question about your problem including a minimal example of your issue.
Not really. Dynamism can only be implemented with the support of scripting.
Comments
Not exactly random but with CSS:
Step 1 - Select queried backgrounds, order them in sequence and adjust the frequency
@keyframes bgrandom {
0% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }
50% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }
55% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.98) 0%); }
80% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.98) 0%); }
85% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
100% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
}
Step 2 - Launch the animation(length animationName repeatMode)
#element{ animation: 1.2s bgrandom infinite; }
Easy to use, customize and works great. Similar technique can be used for sliders, spinners, etc.
Comments
<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>
Using PHP
Comments
As bosco-mabutao mentioned, without a script you cannot currently achieve dynamism, however, if you inject an inline script within your index.html before loading react it will be instant and you won't see the pink background.
function setRandomBackground() {
const colors = [
"#ffd7d5",
"#ffe9d6",
"#ffffd1",
"#d6ffda",
"#d7eeff",
"#dad6ff",
"#ffd6e8",
"#f5f5dc",
"#f4e4e4",
"#e4e6f4"
];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
}
setRandomBackground();
Comments
