Someone just recreated Doom using only CSS — and it actually works

Every programmer knows the classic joke: “But can it run DOOM?” Over the years, the legendary 1993 shooter has been made to run on almost everything imaginable. People have managed to get it working on calculators, ATMs, smart refrigerators, and even devices that were never designed to display games at all. At this point, getting DOOM to run somewhere unusual has become a kind of tradition in programming culture. But one developer decided to approach the challenge in a completely different way. Instead of trying to run DOOM on strange hardware, developer Niels Leenheer asked a very different question: what if DOOM could run using nothing but CSS? Yes, the same CSS that normally styles websites. At first glance, the idea sounds a bit absurd. CSS is typically used to control how webpages look — layouts, colors, fonts, and animations. It’s the language designers use to make websites visually appealing. It was never designed to render a video game or create a 3D environment. But modern web technologies have evolved far beyond their original purpose.

Leenheer started exploring just how powerful modern browsers have become. Today’s CSS includes features like 3D transforms, dynamic variables, and advanced calculations. These tools allow developers to manipulate elements on a page in ways that would have seemed impossible years ago. That sparked an interesting idea: maybe CSS could do more than just style a page. So he decided to test the limits. Instead of relying on technologies like WebGL or a traditional game engine, the visual world of DOOM is built using thousands of basic HTML elements. Every wall, surface, and structure in the game is essentially just a simple <div> element on a webpage. These elements are then positioned and rotated in three-dimensional space using CSS transforms. JavaScript still plays an important role behind the scenes. It handles the game’s logic, player movement, controls, and loading the original game data. But when it comes to actually rendering the world on screen, CSS is doing most of the visual work. In a strange way, the browser’s layout engine ends up acting like a graphics engine.

To make the experiment even more authentic, the project uses the original DOOM level data from the game’s WAD files. These files contain the map layouts and object placements used in the classic game. The system reads this data and converts it into thousands of HTML elements representing the walls and structures of the level. Once those elements are generated, CSS variables and transforms position them in 3D space. Slowly, the familiar corridors and rooms of DOOM start to take shape inside the browser. The result is both unusual and impressive. What players see on screen is essentially a huge collection of styled webpage elements arranged in a way that recreates a classic game environment. Projects like this may seem like technical curiosities, but they actually highlight how powerful modern browsers have become. Today’s browsers can handle complex visual rendering, real-time updates, and even three-dimensional environments. When CSS was first introduced decades ago, it was simply meant to help style documents on the web. No one imagined it might one day help recreate a video game.

Of course, no one is suggesting CSS should replace real game engines. That’s not really the point of the experiment. The project is more about curiosity and exploration — seeing how far existing tools can be pushed. And that spirit of experimentation is a big part of programming culture. Developers often create strange or impractical projects just to test limits and explore possibilities. Sometimes those experiments lead to new ideas. Other times they simply demonstrate how creative technology can be. The tradition of running DOOM on unusual platforms fits perfectly into that mindset. It’s a playful way of testing what hardware and software can do. So while running DOOM with CSS might sound a little ridiculous at first, it also proves something interesting. With enough creativity, even tools designed for something simple — like styling webpages — can be pushed into doing something extraordinary. Sometimes innovation begins with a simple, slightly ridiculous question: what would happen if CSS tried to run DOOM?

Spread the love

MORE AMIGA & RETRO NEWS