Is it possible to generate random color with pure CSS and without using javascript? It's probably impossible but I'm still curious.
Asked
Active
Viewed 1.1e+01k times
45
-
2It can't be done. CSS is pretty much static. – Bart Mar 10 '13 at 21:41
-
http://stackoverflow.com/questions/476276/using-javascript-in-css – Blender Mar 10 '13 at 21:43
-
3@Blender That is not actually *pure* CSS though. – Boaz Mar 10 '13 at 21:44
-
@Boaz: Not pure CSS, but it's as close as you can get. – Blender Mar 10 '13 at 21:44
-
@Blender Well, OP clearly says *no javascript* :) – Boaz Mar 10 '13 at 21:45
-
Use some javascript, it wont hurt :) http://jsbin.com/iyexum/1 – Tomarinator Mar 11 '13 at 08:40
-
1Did you managed to do something ? – Thomas Ayoub Apr 10 '15 at 08:42
4 Answers
18
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.
Zach Saucier
- 24,871
- 12
- 85
- 147
-
1
-
2@sanojlawrence It's impossible to help blindly. You should probably create a new question about your problem including a [minimal example of your issue](https://stackoverflow.com/help/mcve). – Zach Saucier Feb 09 '20 at 13:20
6
<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>
Using PHP
Jono
- 163
- 1
- 5
5
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.
DIGmetrics
- 51
- 1
- 2
