CSS Minecraft
142 comments
·May 26, 2025globie
ericrosedev
have you seen this modern marvel? https://diana-adrianne.com/purecss-lace/
qwertox
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.
ryukoposting
Wow, Dark Reader absolutely mutilated her.
lelandfe
Wow, mobile Safari hates this. Zooming in and scrolling around crashes the page constantly.
null
reaperducer
Works fine on my iPhone 14.
bigyikes
Diana is a treasure!
owjofwjeofm
this is my favorite one one I've seen: https://lyra.horse/css-clicker/
koynoyno
These were 1852 seconds well spent. If you don't hate clickers, try this one, it was definitely made with love.
i_am_a_peasant
latest in my long list of poor life choices, not going to bed at 2 AM because I'm waiting to reach 10 mil views :)))))
i_am_a_peasant
oh man this was so perfect
Groxx
that endgame is absolutely perfect
mikeponders
Wild, got me hooked!
kataqatsi
I had the honor of seeing her give a talk. She also has a lot of other css projects that are awesome.
https://lynnandtonic.com/work/
Also love seeing Phoenix devs mentioned!
hbn
Damn, that website is great on its own and it turns out she redesigns/rewrites it every year to learn new web technologies.
https://lynnandtonic.com/archive/
Got this bookmarked to click around for inspiration in my free time.
Waterluvian
So many of these look deliciously interactive but aren’t. Is that because I’m on mobile or do they not do anything?
gs17
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).
matrix2596
poring over it or pouring your attention :)
globie
My bad, I forgot I'm a liquid. It's too late to edit, but s/po\w*/poured over/ anyway :)
shultays
but they are all individual divs
simonw
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/
johnisgood
This is how CSS CAPTCHAs are made (for Tor websites), and sign up / login modals, and many other stuff.
cmrx64
good write up, thanks. talk about a combinatorial explosion!
null
casualrabbit212
[dead]
assimpleaspossi
But highly impractical and far beyond what CSS should be used for.
sd9
Obviously...
That's why it was done
For fun and to see whether it could be done
assimpleaspossi
My point is that there will be too many who will look at this and start using CSS in ways it is not intended. Even today, far too many people attempt to use CSS for things best left for SVG.
popcorncowboy
If you really wanna get your blood boiling how about some Doom with HTML checkboxes - https://healeycodes.com/doom-rendered-via-checkboxes
benjaminaster
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
mudkipdev
This was criminally underrated, great job
avestura
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...
faresahmed
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].
[0]: https://github.blog/news-insights/product-news/new-github-pa...
skulk
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.
johnh-hn
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.
globie
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.
I kind of like it.
donatj
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.
90s_dev
That is the most hacky solution I may have ever seen in a CSS demo. I love it.
movedx01
It's always radio buttons, every single time
frozenlettuce
Best anti-firebase post I've ever seen
craigseeman
Yah, I hope this doesn't end up costing them an arm and a leg :( it was working last night
null
ycombinatrix
this project doesn't use a backend, so not sure why firebase is needed. github pages would have unlimited bandwidth.
noman-land
Incredibly brilliant. Seems to have gone completely unnoticed 2.5 years ago.
flippyhead
See now that's amazing. Luck is such a factor in ... everything!
simonw
Alternative URL for if the site has trouble keeping up: https://benjaminaster.github.io/CSS-Minecraft/
ElCapitanMarkla
Reminds me of a couple of Keith Clark's projects from a good 10+ years back
Kholin
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...
nightpool
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
patates
Just think about setting what Minecraft has achieved as requirements from the get go: 1) Be one of the most successful games ever created. 2) Basic game mechanics should be possible to be implemented via just HTML and CSS (no JS).
I really like doing this when something extraordinary happens by "accident".
bradly
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.
simonklitj
Is this a thing? https://medium.com/hypersphere-codes/randomness-in-css-b55a0...
bradly
Unfortunately that solution does not work on Firefox or Safari.
menzoic
Can LLMs help?
Cthulhu_
Can they? I think it's weird that you ask a question (or, offer a possible solution in the shape of a question) without verifying your own assertion first.
To answer your question, LLMs confirm you can't generate a random number in CSS.
reverendsteveii
alas, it seems that just shouting "AI" at problems is the latest trend in people who don't build software acting as though they know how building software works.
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/