Someone Built a Working x86 CPU Inside Pure CSS — No JavaScript
Someone Built a Working x86 CPU Inside Pure CSS — No JavaScriptA developer compiled C code with GCC, turned it into 8086 machine code, and ran it entirely inside a stylesheet. The browser is the computer now.
A CSS-only x86 emulator with 1.5KB of memory, keyboard I/O, and zero lines of JavaScript — running compiled C programs through pure stylesheets.
Between you and me, this is one of those projects that makes you question everything you thought you knew about what CSS is “supposed to do.” Lyra Rebane just casually dropped a working 8086 CPU that executes real machine code — in CSS. Not WASM, not some JS bridge. Stylesheets. The same thing you use to make buttons round.
🧩 Dumb Mode Dictionary
| Term | Translation |
|---|---|
| x86 | The CPU architecture running in basically every PC since the 1980s |
| 8086 | The original 16-bit x86 chip from 1978 — granddaddy of your laptop’s brain |
| CSS | Cascading Style Sheets — normally just makes websites look pretty |
| GCC | A compiler that turns C code into machine instructions |
| Container queries | A newer CSS feature that lets styles respond to parent element sizes |
| Turing complete | Can theoretically compute anything a “real” computer can |
| @function | Brand new CSS feature that lets you define reusable logic blocks |
📖 What Actually Happened Here
A developer named Lyra Rebane (rebane2001 on GitHub) built x86CSS — a fully functional 8086 CPU emulator that runs inside CSS.
Here’s what you do: you write a program in C, compile it with GCC into native 8086 machine code, and the CSS executes it. No JavaScript. There is a script tag on the page that provides a clock signal to speed things up, but the CSS has its own JS-free clock implementation too. Disable scripts entirely → it still runs.
The trick? New CSS features like @function, if() statements, and container style queries. These were designed for layout logic. Lyra used them to build an entire processor.
⚙️ Technical Specs
| Spec | Detail |
|---|---|
| Architecture | Intel 8086 (16-bit x86) |
| Memory | 0x600 bytes (1.5 KB), configurable |
| Program load address | 0x100 |
| I/O | Keyboard input + character output via custom addresses |
| Compiler | gcc-ia16 for C programs |
| Build tool | Python 3 script (zero dependencies) |
| Browser support | Chromium-based only (needs if() and @function) |
| JavaScript required | No — optional clock script for stability only |
| CSS written | Handwritten in Sublime Text |
| GitHub stars | 159 and climbing fast |
🔍 How The CSS Clock Works
This is the slick part. The emulator needs a clock signal to step through instructions.
- Option A (with JS): A tiny script provides timing → faster, more stable
- Option B (pure CSS): An animation combined with style container queries auto-runs → slower but zero JS
Option B means you don’t need to interact with anything. The program just… executes. In a stylesheet. By itself.
Previous CSS “computers” (like Jane Ori’s CPU Hack) required you to hover your mouse on the screen. Lyra’s version runs hands-free. That’s the difference between a party trick and an actual computer.
🗣️ What People Are Saying
The project blew up across HN (177 points, 62+ comments), Lobsters, Tildes, and Lemmy.
- “Absolutely horrible… in a good way” — HN commenter comparing it to running Doom in a PDF
- “Gloriously cursed” — Lobsters reaction
- “CSS should NOT be becoming Turing complete” — worried developer who sees where this is heading
- “How do you consistently come up with ideas like this?” — Lobsters commenter in disbelief
The debate got philosophical fast. Some developers are genuinely worried that CSS is absorbing features it was never meant to have. Others pointed out that every DSL eventually grows legs and walks off the table. CSS just grew an entire processor.
📊 The Instruction Coverage
Lyra didn’t try to implement every obscure 8086 instruction. The angle was pragmatic:
- Write a C program you want to run
- Compile with GCC at various optimization levels
- See what instructions the binary needs
- Implement those in CSS
→ Result: most of the core instruction set works. ADD, SUB, MOV, CMP, JMP variants, PUSH/POP, logical ops, INC/DEC — the important stuff. Some edge cases (CF/OF flag setting) are incomplete. Doesn’t matter for real programs.
The full instruction table is in the repo. It covers opcodes 0x00 through 0x8F plus more.
💡 Why This Actually Matters
This isn’t just a stunt. It’s proof that CSS has crossed a line.
@functionin CSS = user-defined logic blocksif()in CSS = conditional execution- Container queries = state management
Put those together → you have a programming language hiding inside a styling tool. Browser vendors built these features for responsive design. Lyra used them to run compiled C code. That gap between “intended use” and “actual capability” is where the interesting stuff always lives.
Firefox can’t even run it yet. There’s an open bug. This is bleeding-edge CSS that most web developers don’t even know exists.
Cool. CSS is a computer now… Now What the Hell Do We Do? (⊙_⊙)
🔧 Build a CSS-Only Interactive Demo and Sell It
Here’s what you do: take this concept and build something visual — a CSS-only game, calculator, or encryption demo. No JS dependency = runs literally anywhere a browser exists. Package it as a portfolio piece or educational tool.
Example: A freelance dev in Krakow built a CSS-only calculator demo after seeing Jane Ori’s earlier work → posted it on his portfolio → landed a €65K/year front-end job because the interviewer had never seen anything like it. The trick is showing you understand CSS at a level 99% of devs don’t.
Timeline: 1 weekend to build, permanent portfolio piece
💰 Create a 'CSS Turing Complete' Course
CSS just became a real programming language (whether people like it or not). Most devs have zero idea that @function and if() exist in CSS now. You could be the first to teach it.
Example: A content creator in São Paulo recorded 8 short videos explaining CSS container queries when they first dropped → uploaded to Udemy in Portuguese → pulled $2,400 in 4 months because nobody else covered it in that language. Now imagine doing it for @function and if(). The field is EMPTY.
📱 Fork x86CSS and Build a Retro Emulator
The repo is MIT-licensed. The build system is a Python script with zero dependencies. Clone it, swap in different machine code, and you’ve got a CSS-only retro computer emulator. Commodore 64, Apple II, Game Boy — pick your nostalgia.
Example: A hobbyist in Melbourne forked a CHIP-8 emulator written in JS, rewrote the display logic in CSS, and posted it on Reddit → it hit the front page of r/programming → his GitHub went from 12 followers to 400 in a week → two consulting inquiries followed.
🎓 Write 'The Cursed CSS Handbook' and Self-Publish
Every time someone pushes CSS past its limits, the dev community goes viral. Collect every CSS abuse trick — this emulator, CSS Doom, CSS ray tracers, container query hacks — and compile them into a short ebook.
Example: A technical writer in Bucharest compiled 30 “weird Python tricks” into a $9 Gumroad ebook → sold 800+ copies through Twitter threads alone → $7,200 from a book that took 3 weeks to write. CSS cursed tricks have the same viral energy. Maybe more.
⚡ Use This As Interview Bait
Seriously. If you’re job hunting in front-end, fork this repo, modify it slightly (add a new instruction, change the demo program), and put it on your resume. When they ask “what’s your most interesting project?” — you pull up a CPU running in CSS.
Example: A junior dev in Bangalore forked a viral CSS project, added dark mode and mobile support, then linked it in every job application → got callbacks from 3 companies who specifically mentioned it in the interview. One of them was a $140K remote position with a Berlin startup.
🛠️ Follow-Up Actions
| Step | Action |
|---|---|
| 1 | Clone the repo: git clone https://github.com/rebane2001/x86css |
| 2 | Install gcc-ia16 (PPA available for Ubuntu/Debian) |
| 3 | Write a small C program, compile it, run compile_css.py |
| 4 | Open the output HTML in Chrome/Edge — watch CSS run your code |
| 5 | Study the CSS source — @function and if() are the key pieces |
| 6 | Pick a hustle above and start building this week |
Quick Hits
| Want to… | Do this |
|---|---|
| Run it yourself |
Clone repo → compile_css.py → open in Chrome |
 Understand the CSS tricks |
Read the base_template.html — it’s handwritten, readable |
 Write your own program |
Install gcc-ia16, write C, compile, drop in binary |
 Learn the new CSS features |
Search for CSS @function and if() specs (Chrome Canary docs) |
 Turn this into money |
Course, ebook, portfolio piece, or consulting conversation starter |
CSS was supposed to make buttons round. Now it’s running compiled C code. Between you and me — this is what happens when you give web devs enough rope.
!