20+ CSS Games
The Pure CSS Game Examples collection demonstrates how interactive mechanics function through CSS and HTML alone. Animations handle state changes, selectors manage game logic — eliminating JavaScript overhead between player intent and immediate feedback.
Games use CSS animations with steps() to create discrete game state transitions, while :checked` pseudo-class toggles board states and piece positions. CSS Grid arranges game boards (tic-tac-toe, chess, puzzle grids); Flexbox positions game pieces and UI controls. Transform and rotate() flip cards in memory games; clip-path creates custom piece shapes. Conic-gradient builds spinning wheels and selection indicators; animation-delay staggers piece movements for sequential reveals. CSS Custom Properties store game difficulty levels and theme colors; calc() computes dynamic positions based on grid size.
Responsive design scales game boards via media queries and aspect-ratio containers, maintaining square grids on any device. Focus states remain visible on game controls. The collection includes free CodePen demos, downloadable code, and updated examples. Each snippet prioritizes Core Web Vitals — zero layout shift through fixed grid dimensions, hardware-accelerated transforms via will-change: transform, minimal repaints using contain: layout.
Examples
Interactive Drag-and-Drop Jigsaw Puzzle
This is an Interactive Drag-and-Drop Jigsaw Puzzle. It dissects a single raster image into an interlocking grid of movable pieces without relying on a single line of JavaScript. Its function is to gamify visual content, converting passive image consumption into a tactile, logic-driven interaction.
Chrome 84+
Edge 84+
Firefox 90+
Safari 15.4+
See the Pen Interactive Drag-and-Drop Jigsaw Puzzle.
Can :has() Connect 4?
A fully functional Connect 4 game implemented entirely in CSS, utilizing the :has() selector to manage complex game state, enforce turn-taking via CSS counters, and detect win conditions (vertical, horizontal, diagonal).
See the Pen Can :has() Connect 4?.
The Backrooms: CSS Edition
A fully playable first-person 3D horror game inspired by “The Backrooms”, built almost entirely with CSS.
See the Pen The Backrooms: CSS Edition.
Pure CSS Carnival Game
A fun and dynamic reaction game where the user must click moving targets within a time limit, with the score automatically tracked using CSS.
See the Pen Pure CSS Carnival Game.
Pure CSS Game: Stacker
A fully playable “Stacker” arcade game built entirely with CSS, utilizing the radio button hack and animation timing control.
See the Pen Pure CSS Game: Stacker.
A pure CSS/HTML ghost‑hunting game — each ghost is a hidden checkbox inside nested containers. Clicking busts the ghost, increments a CSS counter for scoring, and reveals the next ghost via stepped animations. The timer and end screen are driven by a menu checkbox and keyframes; the whole game runs without JavaScript.
A CSS‑only tic‑tac‑toe game – hidden radio buttons manage turns and win conditions via sibling combinators and :checked selectors. Victory detection uses long chains of adjacent selectors; the game resets via a link that reloads the page. Fully functional without JavaScript, but the logic is hardcoded to the markup structure.
This is a pure CSS rock‑paper‑scissors game — no JavaScript. Radio inputs control the display; each hand is built with CSS shapes. Selecting a move transforms the fingers and reveals the outcome. The animated labels create a shuffling illusion before the choice.
Radio buttons for each cell store player moves — X and O share a name per cell, so only one can be checked. The board uses CSS Grid; win conditions are detected via long chains of :checked selectors targeting specific combinations, revealing an end overlay. Pure CSS, no JavaScript — a clever but verbose logic puzzle.
Radio buttons select the hidden movie title, checkboxes track guessed letters — the game state is managed purely through CSS combinators and :checked selectors. Each wrong guess moves the figure and the shark closer; winning conditions trigger popups via long selector chains. The entire game runs without JavaScript — a technical demonstration of CSS logic, though the code is verbose and tightly coupled to the HTML structure.
Sass mixins and loops generate hundreds of radio inputs and selectors — the game state is managed entirely by :checked and sibling combinators. Movement, inventory, and puzzles are hardcoded into the CSS logic. The code is an impressive technical feat but extremely verbose and not maintainable.
A CSS‑only construction game — hidden radio buttons toggle building states, and hundreds of nested selectors draw houses, sheds, chimneys, and ladders via pseudo‑elements. The code uses Sass loops and a labyrinth of sibling combinators to manage a 4×4 grid, day/night cycles, and even a lighthouse win condition. It’s a technical feat, but the logic is impenetrable and tightly coupled to the HTML structure.
Checkboxes control the game state – hitting a mole checks its box, hitting a hole damages it by revealing a second “hole” state. Scoring is handled via a massive chain of sibling combinators that update the score display based on checked counts. Moles appear via a single, hardcoded keyframe; the hammer is a pseudo‑element animation. The game is fully functional, but the logic is verbose and tightly coupled to the markup.
This CSS‑only tic‑tac‑toe game uses hidden checkboxes and sibling combinators to track moves and detect wins. SVG elements draw the X and O with stroke‑dashoffset animations; the board lines appear sequentially. The logic is entirely client‑side, no JavaScript, but the approach is extremely verbose and tightly coupled to the markup.
