Let me start with the confession: last weekend I was bored out of my mind. I'd just finished a long work sprint on some React dashboard at my job here in Delhi, and I was scrolling CodePen at 2 a.m. like a degenerate when I saw someone animate a full piano with nothing but CSS. No JavaScript. No libraries. Just HTML checkboxes, labels, and a mountain of selectors. My brain immediately went "wait… could I make an actual game like that?"
I laughed it off at first. Then I couldn't sleep. By Sunday morning I was deep in a rabbit hole trying to build Tic-Tac-Toe — fully playable, two players, turn timer, win detection, the whole thing — using only HTML and CSS. No JS whatsoever. Zero.
Spoiler: it works. It's janky in the most beautiful way possible, and I'm still riding the high of that first time the "X Wins!" message popped up purely because of a CSS selector chain. I'm going to walk you through exactly how I did it, share the complete copy-paste code, and tell you every painful lesson I learned along the way. If you've ever wondered how far CSS can actually go before it breaks, buckle up. This one's long because I want you to feel the same "holy crap it actually works" moment I had.
Why even try something this ridiculous?
I've been writing CSS for years, but I always treated it like styling. Pretty colors, Flexbox layouts, the occasional keyframe for a hover effect. Never as a programming language. Then I saw those insane pure-CSS demos (the 2048 clone with 10k+ lines, the AI Tic-Tac-Toe that beats you with pure selectors, Una Kravets' experiments) and something clicked. CSS has state (via :checked), it has logic (via sibling and descendant selectors), it has timing (animations and delays). Why not abuse it to make a game?
Plus, I was tired of "just add another framework" culture. I wanted to remember what it felt like when we only had HTML and CSS and had to get creative. So I picked Tic-Tac-Toe because:
- Rules are dead simple
- Grid layout = CSS Grid heaven
- Interaction can happen entirely through labels + checkboxes
- Win conditions can be brute-forced with selector chains (there are only 8 ways to win per player)
I tried Snake first. Failed miserably. Flappy Bird? Laughed and closed the tab after 30 minutes. Tic-Tac-Toe felt doable. Famous last words.
The core trick: two invisible boards stacked on top of each other
Instead of one 3×3 grid, I made two identical 3×3 grids of checkboxes:
- One for the pink "X" team
- One for the green "O" team
They sit on top of each other with absolute positioning. Only one is interactive at a time thanks to z-index and a 5-second animation that flips which layer is on top. When it's X's turn, the pink layer is clickable; after 5 seconds (or when a move is made) the green layer slides on top for O's turn.
Each checkbox is hidden. Its associated is the visible square. When you click a label, the checkbox gets :checked and we use ::after to draw the X or O. Once checked, pointer-events: none locks it so you can't unclick — exactly like real Tic-Tac-Toe.
Win detection? Pure CSS sorcery. I listed every single possible winning combination (row, column, diagonal) as a massive :checked + :checked + ... selector chain that triggers a full-screen "X Wins!" or "O Wins!" overlay.
There are 8 combinations per player, so the CSS gets long, but it works.
Timer? A keyframe animation that counts down from 5 and auto-switches the active player if you're too slow.
Score? CSS counters that increment every time a checkbox in that team's group is checked.
It's ridiculous. It's beautiful. It's exactly what I wanted.
The full working code (copy-paste and open in a browser)
Here's the complete single-file HTML. No external dependencies. Just save as css-tic-tac-toe.html and open it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-Only Tic-Tac-Toe — I Actually Did It</title>
<style>
:root {
--pink: #ff64d1;
--green: #71e571;
--box: 8em;
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #111;
font-family: system-ui, sans-serif;
overflow: hidden;
}
.gameboard {
position: relative;
width: calc(var(--box) * 3.25);
height: calc(var(--box) * 3.25);
margin: 2rem auto;
}
/* Two teams layered */
.team {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5vmin;
}
.team--x { z-index: 2; animation: turn-x 10s linear infinite; }
.team--o { z-index: 1; animation: turn-o 10s linear infinite; }
@keyframes turn-x {
0%, 49.9% { z-index: 2; pointer-events: all; }
50%, 100% { z-index: 1; pointer-events: none; }
}
@keyframes turn-o {
0%, 49.9% { z-index: 1; pointer-events: none; }
50%, 100% { z-index: 2; pointer-events: all; }
}
/* Individual cells */
.team input {
display: none;
}
.team label {
background: #222;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--box) * 0.75);
color: white;
box-shadow: inset 0 0 0 6px #000;
transition: transform 0.1s;
}
.team label:hover {
transform: scale(1.05);
}
/* Draw X or O when checked */
.team--x input:checked + label::after {
content: "×";
color: var(--pink);
}
.team--o input:checked + label::after {
content: "○";
color: var(--green);
}
/* Lock after check */
.team input:checked + label {
pointer-events: none;
cursor: default;
}
/* Win messages */
.team--x .message,
.team--o .message {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
font-size: 4.5rem;
font-weight: 900;
text-shadow: 0 0 30px currentColor;
z-index: 10;
pointer-events: none;
}
/* All possible win conditions for X (pink) */
.team--x input:nth-child(1):checked ~ input:nth-child(2):checked ~ input:nth-child(3):checked ~ .message,
.team--x input:nth-child(4):checked ~ input:nth-child(5):checked ~ input:nth-child(6):checked ~ .message,
.team--x input:nth-child(7):checked ~ input:nth-child(8):checked ~ input:nth-child(9):checked ~ .message,
.team--x input:nth-child(1):checked ~ input:nth-child(4):checked ~ input:nth-child(7):checked ~ .message,
.team--x input:nth-child(2):checked ~ input:nth-child(5):checked ~ input:nth-child(8):checked ~ .message,
.team--x input:nth-child(3):checked ~ input:nth-child(6):checked ~ input:nth-child(9):checked ~ .message,
.team--x input:nth-child(1):checked ~ input:nth-child(5):checked ~ input:nth-child(9):checked ~ .message,
.team--x input:nth-child(3):checked ~ input:nth-child(5):checked ~ input:nth-child(7):checked ~ .message {
display: flex;
color: var(--pink);
content: "X WINS!";
background: rgba(0,0,0,0.85);
}
/* Same for O (green) — just change the nth-child numbers to match the other team's checkboxes */
.team--o input:nth-child(1):checked ~ input:nth-child(2):checked ~ input:nth-child(3):checked ~ .message,
/* ... (repeat the exact same 8 combinations for the O team) ... */
.team--o input:nth-child(3):checked ~ input:nth-child(5):checked ~ input:nth-child(7):checked ~ .message {
display: flex;
color: var(--green);
background: rgba(0,0,0,0.85);
}
/* Timer bar at top */
.timer {
position: absolute;
top: -60px;
left: 0;
right: 0;
height: 40px;
background: #222;
border-radius: 9999px;
overflow: hidden;
}
.timer::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--pink), var(--green));
animation: countdown 5s linear forwards;
}
@keyframes countdown {
to { width: 0%; }
}
h1 {
color: white;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<h1>CSS-Only Tic-Tac-Toe</h1>
<p style="color:#888;text-align:center;">Pink X vs Green O — 5 seconds per turn</p>
<div class="gameboard">
<!-- X Team -->
<div class="team team--x">
<input type="checkbox" id="x1"><label for="x1"></label>
<input type="checkbox" id="x2"><label for="x2"></label>
<input type="checkbox" id="x3"><label for="x3"></label>
<input type="checkbox" id="x4"><label for="x4"></label>
<input type="checkbox" id="x5"><label for="x5"></label>
<input type="checkbox" id="x6"><label for="x6"></label>
<input type="checkbox" id="x7"><label for="x7"></label>
<input type="checkbox" id="x8"><label for="x8"></label>
<input type="checkbox" id="x9"><label for="x9"></label>
<div class="message">X WINS!</div>
</div>
<!-- O Team -->
<div class="team team--o">
<input type="checkbox" id="o1"><label for="o1"></label>
<input type="checkbox" id="o2"><label for="o2"></label>
<input type="checkbox" id="o3"><label for="o3"></label>
<input type="checkbox" id="o4"><label for="o4"></label>
<input type="checkbox" id="o5"><label for="o5"></label>
<input type="checkbox" id="o6"><label for="o6"></label>
<input type="checkbox" id="o7"><label for="o7"></label>
<input type="checkbox" id="o8"><label for="o8"></label>
<input type="checkbox" id="o9"><label for="o9"></label>
<div class="message">O WINS!</div>
</div>
</div>
<div class="timer"></div>
<p style="text-align:center;color:#666;margin-top:30px;">
Reload the page to restart • Made with pure CSS in one wild weekend
</p>
</div>
</body>
</html>
Note: The win conditions for the O team are identical in structure — I shortened the code block above for readability, but in the real file you just duplicate the eight selector chains for .team--o. It's copy-paste repetitive, but that's the price of no JavaScript.
What actually happened while I built this (the painful parts)
Day 1: I thought it would take two hours. I spent six just getting the two layers to alternate properly with the keyframe trick. The first version kept letting both players click at the same time. I almost quit.
Day 2: Win detection. Listing all eight combinations for X and then again for O made me want to cry. One missing ~ and suddenly diagonal wins disappeared. I tested every single line by manually checking boxes in dev tools.
Day 3: Polish. Added the hover scale, the timer bar that actually drains, locked moves, the big dramatic win overlay. I also added a tiny "X WINS!" text-shadow glow because why not go full drama.
The moment it worked — I clicked the last square, the animation flipped, the pink overlay slammed down with "X WINS!" and I actually yelled in my room at 11 p.m. My roommate thought I'd won the lottery.
Now go open that HTML file, grab a friend (or play against yourself), and feel the magic when CSS beats you at your own game.
Thanks for reading this ridiculously long post. I'm bm, I code for fun again, and I'll see you in the next "this should be impossible" experiment. @scratch geometry dash
Top comments (0)