Hello people, author here!
Some comments on this from my side:
- You people totally overwhelmed my website... I use(d) Firebase static hosting because it's completely free and super simple, which reached the 10 GB monthly limit now. I changed to Cloudflare in the meantime, but it'll need some time for the DNS records to update. IN THE MEANTIME, PLEASE USE THE GITHUB PAGES LINK INSTEAD: https://benjaminaster.github.io/CSS-Minecraft/
- I made this almost three years ago now, to try out the limits of what's possible with pure CSS, and to test out the then-new CSS :has() selector.
- This project never got much traction until now, so I never bothered to write about how it works. Simon Willison now already wrote a blog post about it, so I guess I don't have to anymore... https://simonwillison.net/2025/May/26/css-minecraft/
- For the best experience, please view this on a desktop browser, either Chromium-based or Firefox.
- The source code is at https://github.com/BenjaminAster/CSS-Minecraft. The "index.pug" and "main.scss" files contain the actual source code; the rest is mostly just the compiled output.
- Here is a video of me building a house with it: https://www.youtube.com/watch?v=OH8-Y9frP5k
This is fiendishly clever, and really quite elegant.
I made some of my own notes on how this works here: https://simonwillison.net/2025/May/26/css-minecraft/
If anyone's wondering how it manages the state, a quick peek into the source code shows that it uses radiobuttons and the HTML contains all the blocks you could ever possibly place.
Incredibly brilliant. Seems to have gone completely unnoticed 2.5 years ago.
Another hug of death. The website says "It must be upgraded via the Firebase console before it can begin serving traffic again."
Wayback machine for when it used to work: https://web.archive.org/web/20250317122419/https://benjamina...
Best anti-firebase post I've ever seen
Alternative URL for if the site has trouble keeping up: https://benjaminaster.github.io/CSS-Minecraft/
Very impressive!
As I've hit my mid-life slide and (regressed|progressed) back to my youth-self, I've found myself just writing a bunch of apps and sites in html and css and really enjoying it.
One thing I still would like to see cracked is a random-like number in pure CSS. You can almost us there with some of the math functions and browser attributes, but I haven't found anything reliable.
Truly incredible from an HTML perspective, but I think also a testament to how catchy and simple Minecraft is as a concept... a few minutes of noodling around in here and I already built myself a cute little tree and a hill: https://i.imgur.com/PjlDWo5.png
Reminds me of a couple of Keith Clark's projects from a good 10+ years back
It's absolutely brilliant how rotation and movement control is achieved by changing the animation-play-state value using the :active pseudo-class on button elements.
https://github.com/BenjaminAster/CSS-Minecraft/blob/main/mai...
I got "Bandwidth Quota Exceeded"
Pug is an unsung hero in this demo. The template engine made it possible to brute force the UI with 4 levels of nested loop. Impressive!
And it's only 480 lines of CSS! https://github.com/BenjaminAster/CSS-Minecraft/blob/main/mai...
... and 46,022 lines of HTML (3.07MB)
Recently I came across Quake implemented within a single WebGL shader (https://www.shadertoy.com/view/lsKfWd), but this is another level. HTML/CSS is a programming language now.
Please tell me if I understood it correctly:
It implements voxels via <input type="radio" />.
Each of the faces of each voxel is configured via <label>s, one for each face having a different CSS class.
There is a voxel for each type of block (dirt, grass, stone, etc) and only one is activated at a time.
The <input>s are arranged in a 9x9 grid 10 blocks tall times the number of different types of blocks (about 6500 total).
All that is enclosed with <div>s with CSS classes that respond to the camera navigation (look up/down, move up/down, forward/back, clockwise/counter)
That is brilliant!
Blew my mind. I have hundreds of tabs open, no issue on linux chrome.
Another impressive CSS creation -- CSS Puzzle Box: https://suricrasia.online/puzzlebox/
Damn, just visiting this site makes me want to reinstall Minecraft haha.
Did anyone else involuntarily let out multiple expletives when they saw it and it dawned on them how hard this must have been?
This is insane to me.
I remember discovering this trick nearly two decades ago. A co-worker and myself were a bit puzzled at the time and we kind of tossed the idea in the air that "doesn't this mean CSS is Turing Complete?" but we moved on to making things work on IE6 for old clients.
I also got "Bandwidth Quota Exceeded". Seems like you're doing well!
Very nice work :) especially that you even support building sideways and the "hover" always is perfectly placed. Thats something that amazes me the most how clean it feels to place a block. Very good job!
Pretty slick! I never had played minecraft before. I never knew how blocks were place down until I ran this page. But it needs to be able to use the mouse to rotate, and mouse-wheel to scale!
My one regret in life is not having seen this before your Firebase credits were spent for the month. Looking forward to a June attempt!
Web-based minecraft, when?
This is breathtaking and embodiment of creativity. Truly a legend!
Doing this art just with css ,you are greatest one in css sir.
Damn, this is impressive.
Very impressive
Chuối
Mind blowing
Brilliant !
Gj
that's amazing!!!
That's crazy
Well done!
I wonder when AIs can write clever codes like this. Given a surprising constraint.
> For the best performance, please close other tabs and running programs.
This has always been the case with CSS, hasn't it? When you use it for rendering something relatively complex, you're kinda doomed.
I get the dream, we want everything to be declarative, and leave room for future optimizations, so that we can write once and run everywhere forever.
But in practice, it's not really an improvement over traditional GUIs that let you draw directly. Hence CSS is literally adding draw[1].
This is a huge reason 90s.dev doesn't use HTML/CSS but starts from scratch and lets you draw right into WebGL2 yourself, or with high-level APIs if you want.
[1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
Without a doubt the most impressive thing I've seen with CSS.
This immediately brought "A Single Div"[0] to mind, which stood as the coolest CSS demo I'd seen for... 11 years!
This one takes the cake. I'll be pouring over it. Thanks!
[0]: https://a.singlediv.com/