Mastodawn

CSS is DOOMed!

I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

Show thread

Niels Leenheer 1d ago

Want to know how I created this?

Check my blog post with an explanation of the math, the techniques I used and the problems I ran into.

https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/

CSS is DOOMed!

Every wall, floor, barrel, and imp is a div — DOOM rendered entirely in CSS. Using 3D transforms, CSS math functions, @property, clip-path, anchor positioning, and SVG filters to build a fully playable 3D first-person shooter in the browser without Canvas or WebGL.

Hello my name is Niels Leenheer

Show thread

Niels Leenheer 1d ago

Want to know even more?

I'm speaking at #cssday where I will give a talk called "CSS Doom Lasers". Where I will talk about CSS and DOOM and much more. Hint: Lasers.

Tickets are still on sale:
https://cssday.nl

CSS Day 2026, 11th & 12th of June, Amsterdam

CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.

Show thread

Scott Kellum 1d ago

@html5test Incredible! Absolutely incredible 👏🏻👏🏻👏🏻

Show thread

Andrew 1d ago

@html5test lol, poor browser developers receiving this in a bug report.

Show thread

Some Kind Of Garf 5h ago

@cinebox @html5test Probably a few exasperated WONTFIX's.

Show thread

gaytabase 1d ago

@html5test nice! i used css transforms to replicate the apple cover flow thing when they were brand new, but this is on another level 😂

Show thread

Niels Leenheer 1d ago

@dysfun Same principle. Just a few more divs 😁

Show thread

1d ago

@html5test Vanadium wants me to end its suffering

Show thread

Niels Leenheer 1d ago

@aumetra 😱

Show thread

noodle 18h ago

@aumetra @html5test Yeh, looks amazing in Ironfox, absolutely shits the bed in Vanadium.

Show thread

Boyd Stephen Smith Jr.1d ago

@html5test FF-ESR (on Debian) renders the gun+hand in the top-left instead of in the middle-bottom.

Also I couldn't figure out how to shoot.

Very cool. Congratulations.

Show thread

Niels Leenheer 1d ago

@BoydStephenSmithJr The most likely reason is the ESR probably does not yet support Anchored Positioning, which is used for positioning the gun relative to the status bar.

Show thread

Anthk 1d ago

@html5test CSS it's Turing complete? Another vector to run propietary softwaer? A good thing I use Mothra under 9front and #Dillo under GNU Guix.

BTW you can provide full levels from FreeDoom (better if you build a daily compilation, as it has really good but recent changes) with Deutex and GNU make: https://freedoom.github.io

Now you can provide the two full episodes.

Freedoom

Freedoom's website

Free content game using the Doom engine

Show thread

Zoidberg For President 1d ago

@html5test Nice, too bad the mouse doesn't work...

Show thread

Niels Leenheer 1d ago

@ZoidbergForPresident It should work when you go to Full screen mode (left square button in the top right), which uses Pointer Lock to capture the mouse if supported by the browser.

Show thread

Koutsie

1d ago

@html5test runs perfectly on Firefox!

Show thread

🐧DaveNull🐧 ☣️pResident Evil☣1d ago

@html5test The gun is appearing in the upper left corner

Show thread

Niels Leenheer 1d ago

@devnull this is probably because the browser you are using does not support Anchored Positioning.

Show thread

🐧DaveNull🐧 ☣️pResident Evil☣1d ago

@html5test Web "standards" they call it 🤡

It is supported only since Firefox 147 according to this. Which doesn't include Firefox ESR yet…

https://www.reddit.com/r/css/comments/1qbsn2h/css_anchor_positioning_is_now_in_supported_in_all/

Show thread

Niels Leenheer 1d ago

@devnull The whole idea of this project is to see what is possible with modern web standards and pushing the limits and not to create something that works everywhere 🤷‍♂️

@html5test
Wow 😲 🤩

@html5test Surprisingly, it works in Firefox mobile. However, the "Doom" font color is inverted.

Show thread

Sgt Pépère 20h ago

@html5test Wow, that's awesome. The only thing not working with my xbox controler was the shooting, no button allowed me to draw fire.

Show thread

Niels Leenheer 20h ago

@sgtpepere on my PS controller it is mapped to one of the top buttons. But to be honest it was little more than hooking it up and testing if it worked. Not much thought went into creating a good control mapping.

Show thread

Stephen Brooks 🦆20h ago

@html5test Works surprisingly smooth in Firefox.

Show thread

Niels Leenheer 20h ago

@sjb I used Firefox as my main browser during the development of this, as it had the least rendering issues. Their CSS 3D support has been really solid.

Show thread