Incredible. I was so skeptical that I went in on the neckruff and from there to a lacetop, it's really all generated based on background-image but without using images but gradients of specific colors, as well as box-shadows and the like.
I don't think any on the first page are interactive. There might be a few on the next page of it (I only found one where a pen changes color on hover).
- 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.
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.
If anyone is equally curious how the camera state works, it looks like the camera is controlled by running animations when a button is in its :active state and pausing them otherwise.
I... you're right. I was wondering why the world was only 9x9x9, there's 46k lines showing each block can have air, stone, grass, dirt, log, wood, leaves, or glass.
Radio buttons and checkboxes really are magic when it comes to doing neat things in pure CSS. We used to have a lot of neat stuff like pure html/css tabs and toggles but they didn't pass an accessibility audit.
Makes you wonder, how many webpages are dependant on such services. The Web has always been brittle, but it's a little sad seeing a website not able to survive ~50k users on its first day online.
Even the least offenders, GitHub Pages, broke links before [0].
Readit News
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/
Deleted Comment
https://lynnandtonic.com/work/
Also love seeing Phoenix devs mentioned!
https://lynnandtonic.com/archive/
Got this bookmarked to click around for inspiration in my free time.
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
I made some of my own notes on how this works here: https://simonwillison.net/2025/May/26/css-minecraft/
Deleted Comment
Dead Comment
That's why it was done
For fun and to see whether it could be done
I kind of like it.
https://news.ycombinator.com/item?id=33579407
Wayback machine for when it used to work: https://web.archive.org/web/20250317122419/https://benjamina...
Even the least offenders, GitHub Pages, broke links before [0].
[0]: https://github.blog/news-insights/product-news/new-github-pa...
Deleted Comment