March 28, 2026
From style sheets to headshots
CSS is DOOMed
Web loses it over DOOM in CSS: genius stunt or cursed misuse of a style tool
TLDR: Someone made DOOM’s graphics purely with CSS, leaving gameplay to JavaScript, to prove how far browsers have come. The crowd is split between calling it genius performance art and a cursed misuse of a styling tool, with jokes, AI gripes, and a wild debate over whether pure CSS DOOM is possible.
A developer just rebuilt the 1993 classic DOOM using website styling code—yes, CSS—with every wall and monster as a simple page “box.” The gameplay runs in JavaScript, but the visuals are pure CSS wizardry, even using built‑in browser math to place things in 3D. They even had an AI helper port the game loop so they could focus on the flashy bits. The internet? Absolutely melting down.
The loudest take: skeptics grumbling that CSS is a “style tool,” not a game engine. One critic basically asked, “It’s awesome compared to what?” Meanwhile, the hype squad is loving the absurdity, tossing memes like “run Crysis on a microwave” and cheering the “because it’s DOOM” energy. Tinkerers jumped in with challenges: could it be done in pure CSS? One commenter claims CSS can now emulate a whole CPU (aka a computer’s brain) without JavaScript. Suddenly this demo is a battleground over what browsers should do versus what they can do.
Amid the chaos, someone nitpicked the page UX with a link to Practical CSS scroll snapping, and another asked to see it without textures—just raw geometry. Nostalgia meets nerd math, and modern browsers flex with functions like “hypot” and “atan2.” The monsters aren’t in the maze—they’re in the comments, and they’re glorious.
Key Points
- •A playable DOOM is rendered entirely with CSS, with JavaScript used for game logic.
- •Scene geometry is built from original DOOM WAD data (vertices, linedefs, sidedefs, sectors).
- •Raw coordinates are passed as CSS custom properties; CSS computes widths and angles using hypot() and atan2().
- •3D positioning uses CSS transforms such as translate3d and rotateY on thousands of divs.
- •The code is published on GitHub; a prior oscilloscope DOOM project informed map extraction and math.