I just read this awesome post by inhuofficial about a random password generator written in pure CSS. It follows a similar approach as some other pure CSS random number generators out there. Most of them use differently timed animations to "shuffle" the state. The user interacts with it by pausing the animations and voila: A seemingly random number. A really clever approach.

And it got me thinking.

What even is "random"?

"Random", as I would define it, describes an action with a non-determinable result. That doesn't necessarily mean that the result is not deterministic (think, it could be determined in theory, but nobody can). Let's have a look at a simple way to generate a random result: A coin flip.

If you flip a coin a gazillion times, the result will be roughly 50% heads and 50% tails. That seems random. But is it really? Seemingly so, we can't possibly measure all the variables that influence if it's heads or tails, right? But what if we could? If we knew all the preconditions, like, all of them? Position and velocity of every single air molecule in the room, the body temperature of the person flipping the coin, size and weight of the coin, fluctuations in Earth's gravity, whatever you can think of. Would we be able to predict the outcome? I think: Most likely, yes.

And there's the problem.

Classical computers and electricity

At their very foundation, computers work with electricity. Electricity either flows (1) or it doesn't (0). When you wire a few billion transistors together the right way, they can do mathematics and other amazing things, but they still represent this logic of 0 and 1. If you apply the same current to the same parts, the result will be the same.

So, how can this construct generate random numbers? Unless there's a special physical part wired in as well, it can't. That's why the "random" numbers generated by computers, are either generated with a fish tank or they're so-called "pseudo-random" numbers: They only seem to be random, but are actually deterministic.

"Pseudo-random" numbers

So, essentially, the people coming up with pure CSS random number generators ran into the same problems a lot of people did before them when implementing random number generators like /dev/random or Math.random().

And that's no surprise: Generating pseudo-random numbers is its own field of research, actually. According to Wikipedia, there's four different criteria that measure the quality of a pseudo-random number generator:

• Probability of two randomly generated sequences to be different.
• Being indistinguishable from actual random numbers. This is tested with some predefined statistical tests.
• Being impossible for an attacker to calculate or otherwise guess a random number in advance from any previously generated number.
• Being impossible for an attacker to calculate or otherwise guess a random number in advance from any internal state of the generator.

Some pseudo-random number generators rely on the unix timestamp, some may rely on CPU temperature, a hash of the current state of the memory and some constant. They function much like the coin flip: They add dozens of variables to make the result look more and more random, even though it never truly becomes random.

In summary

When I looked for CSS-only random number generators, I often read the sentence "they're not real random numbers" or I even saw references to the XKCD comic about random number generators, but I think those people are a bit unfair to their own achievements. Those generators are as good as it gets with the tools CSS offers. We're dealing with machines that need to be deterministic. Unless there's a possibility to measure quantum weirdness, take photos of fish tanks or measure the light of distant stars flickering in the atmosphere with pure CSS, the numbers that can be generated with CSS will remain pseudo-random.

And that's OK.

I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a ❤️ or a 🦄! I write tech articles in my free time and like to drink coffee every once in a while.

If you want to support my efforts, buy me a coffee ☕ or follow me on Twitter 🐦! You can also support me directly via Paypal!