msephton15h ago

CSS is DOOMed

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 threadrkagerer

But where can I try it out in my browser?

EDIT: https://cssdoom.wtf/

cssDOOM

DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

9:27pmWeb
Show threadTeMPOraL14h ago
Never tried Doom on a phone before, this one is surprisingly fluid and very playable.
Show threadnine_k13h ago

Works smoothly in Firefox. But the default key mapping is busted: fire at Alt means that it opens and closes the menu in Firefox with each press. Also, Alt + left arrow ends the game and goes back in history.

Interestingly, it was more choppy in Chromium.

I could not find a key for moving sideways ("strafing").

All in all, quite mind-boggling.

Show threadranger20712h ago
Strafing is implemented on A and D at least, but having one hand on the arrows to turn and WASD to move is a bizarre mix of modern and original controls
Show threadlights012312h ago

> Interestingly, it was more choppy in Chromium.

Firefox's WebRender is truly a great creation. While Chrome is faster at most things especially involving JS, Firefox puts so much of its rendering on the GPU so moving elements around is incredibly fast.

Show threadbethekidyouwant12h ago
It works perfectly in Safari on mobile. this never happens.