cssDOOM: Developer Recreates Doom Entirely in CSS — Pushing the Absolute Limits of Web Styling

The Project

Developer Niels Leenheer created cssDOOM — a recreation of the classic first-person shooter Doom rendered entirely using CSS (Cascading Style Sheets), the language designed for styling web pages. It's both impressive and absurd.

How It Works

The Approach

• Uses CSS 3D transforms to create the pseudo-3D environment
• Renders walls, floors, and ceilings using CSS box model properties
• Animates movement and perspective using CSS animations and transforms
• No JavaScript for the actual rendering — pure CSS

The Code

/* The general idea */
.map { perspective: 800px; transform-style: preserve-3d; }
.wall { transform: rotateY(var(--angle)) translateZ(var(--depth)); }

The Result

• Playable: You can move around a Doom-like environment
• Messy: The code is complex and "pushing the limits" of what CSS should do
• Impressive: Undeniably a feat of creative engineering

Why It Matters

Browser Engine Testing

Leenheer is also the creator of HTML5Test — one of the most widely used browser compatibility testing tools. Projects like cssDOOM serve as extreme stress tests for browser CSS engines.

The Broader Trend

Developers constantly push web technologies beyond their intended use:

• JavaScript everywhere: JS operating systems, game engines, servers
• CSS art: Complex images rendered in pure CSS
• HTML games: Games built entirely in markup
• CSS Doom extends this tradition to 3D game rendering

Hacker News Reception

The project quickly hit the HN front page (366 points at peak), with comments debating whether this represents:

• A legitimate use of CSS capabilities
• An abuse of web technology
• An impressive engineering flex
• A sign that CSS has become too powerful for its own good

Technical Significance

CSS 3D transforms were originally designed for simple animations and UI effects. That they can render a playable FPS game demonstrates:

• Modern browser engines are incredibly capable
• CSS specification has grown far beyond styling
• The line between "stylesheet" and "rendering engine" has blurred

Try It Yourself

Visit cssdoom.wtf to play Doom in your browser, rendered entirely in CSS.

Source: Niels Leenheer's Blog, The Verge