Table of contents
I have seen loads of people say "it can't be done" and....well it can't (yet)!
However after seeing this awesome post by Alvaro Motoro on how much Jeff Bezos makes per second (and with the useful comment by Temani Afif) I realised I could fake it!
I have shamelessly stolen about 90% of the mark-up for Alvaro's post, I hope he doesn't mind!
Click on the black boxes to generate your password. Click again to start the randomiser going again to pick another password! Simple.
Note: as many of you know I advocate for accessibility, the below is not accessible, it is a silly experiment NOT to be used in the real world.
The chance of generating the same password is actually very low due to human reaction times, rendering times etc.
Obviously as I said earlier, I wouldn't recommend this for production.....it isn't actually random, it isn't accessible and you can't copy and paste the generated password.
In fact it is pretty rubbish as a password generator!
However the principle of "faking" random could be used for all sorts of things such as a random colour picker, dice etc.
Anyway, as it isn't usable in production I am not even going to explain it, just thought I would lay claim to the title of the first person to create a CSS only password generator (as I don't think anyone has done it before)!
(Ok I will explain a little).
We toggle a checkbox and use CSS to grab the checked state. When the checkbox is unchecked (we start checked) we use animation-play-state: paused; to stop all animations. When it is checked we unpause all the animations..
input:checked + label span.number::before {
animation-play-state: running;
}
As for the animations - each box is simply jumping between letters and numbers at a super fast pace, with a different timing for each box so you get the appearance of randomness.
Update
For anyone who likes CSS witch craft / voodoo here is Temani Afif)'s "single element" version (it is two elements...I have to get a dig in somewhere 🤣).
It doesn't work in anything other than Chromium based browsers (at the moment) but how can you possibly not be impressed with the creativity, I think I learned at least 5 new CSS tricks just from that fiddle alone!
I am going to say mine is better just because it uses 62 characters instead of 26...😋