Welcome to our collection of hand-picked free HTML and CSS games code examples. These examples have been carefully selected from a variety of sources including CodePen, GitHub, and other resources. This collection has been updated as of August 2023 with 8 new items.

CSS games are interactive games created using HTML and CSS. They range from simple puzzles and quizzes to more complex games like chess or tic-tac-toe. These games can be played directly in the browser, making them accessible to a wide audience.

CSS games can enhance the interactivity and engagement of your website. They can be particularly effective in scenarios where you want to provide a fun and engaging experience for your users, or when you want to showcase your skills in CSS and JavaScript.

Our collection features a wide range of CSS games, each with its own unique design and gameplay. Whether you’re looking for a simple puzzle game to challenge your mind, or a complex strategy game to test your skills, you’re sure to find something that suits your needs.

We hope you find this collection useful and inspiring for your web development journey. Happy gaming!

Related Articles

  1. jQuery Games
Demo image: A Pure CSS Table Tennis Game

Author

  • Ben Evans

Made with

  • HTML / CSS (SCSS)

About a code

A Pure CSS Table Tennis Game

No images. No JavaScript. Only CSS. And a few HTML radio inputs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Can Connect 4?

Author

  • Jhey

Made with

  • HTML / CSS

About a code

Can Connect 4?

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Only Puzzle Game

Author

  • Temani Afif

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Only Puzzle Game

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Mine Sweeper

Author

  • Samridhi

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Pure CSS Mine Sweeper

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Only Retro Dungeon Maze Puzzle

Author

  • Takane Ichinose

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Only Retro Dungeon Maze Puzzle

This is a simple maze or dungeon escape game, with its functionality made entirely in CSS. The main goal of this game is to of course find the finish line. The main rule of this game is to click the horizontal or vertical tile beside the character. You may not click diagonally.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Play CSS Space Invaders

Author

  • Jon Slater

Made with

  • HTML / CSS

About a code

Play CSS Space Invaders

A reasonably complete version of Space Invaders, using only CSS, Includes a high score table.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: NES Duck Hunt game in CSS

Author

  • Hai Le

Made with

  • HTML (Pug) / CSS (Less)

About a code

NES Duck Hunt game in CSS

This is a remake of the classic NES game duck hunt in CSS, it is made up entirely of HTML and CSS, no images are used.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pure CSS/SVG Tic Tac Toe

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Pure CSS/SVG Tic Tac Toe

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pure CSS Whac-A-Mole

Author

  • Deep Toaster

Made with

  • HTML / CSS

About a code

Pure CSS Whac-A-Mole

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: The Caretaker - A Pure CSS Horror/Puzzle Game

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

The Caretaker - A Pure CSS Horror/Puzzle Game

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: A Pure CSS Game - You Must Build a Lighthouse

Author

  • Ben Evans

Made with

  • HTML / CSS (SCSS)

About a code

A Pure CSS Game - You Must Build a Lighthouse

100% CSS. No artificial colours or ingredients.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Plankman

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

About a code

Plankman

Plankman is a pirate-themed version of the classic hangman game. It is developed using HTML and CSS without a single line of code.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Rock-Paper-Scissors

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

About a code

CSS Rock-Paper-Scissors

A Rock-Paper-Scissor game developed in HTML+CSS without any JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Tic-Tac-Toe

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

About a code

CSS Tic-Tac-Toe

Tic-Tac-Toe game developed using only HTML and CSS, without any JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: The Mine: No JS, CSS Only Adventure Game

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

The Mine: No JS, CSS Only Adventure Game

The logic behind it is actually relatively simple and uses a 7+ year old technique. By clicking on an arrow (in this case a label), it checks the relevant input and then using the :checked pseudo selector, we can traverse down the DOM the correct amount of iterations and shift the entire viewport a whole 'segment' over. The lifts work entirely the same way except instead when we click down, we are actually checking the segment below.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Ghost Bustin' game with CSS Variables

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Pure CSS Ghost Bustin' game with CSS Variables

A pure CSS game. A "whack-a-mole" type game where you bust ghosts by tapping them. It leverages checkbox tricks and the use of counter-increment to keep score. It also leverages CSS variables to assign scores to ghosts along with their speed and delay. Finally, it's wrapped in a form so we can reset everything with a type='reset' at the end.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pure CSS Game: Stacker

Author

  • Jerry Low

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

Pure CSS Game: Stacker

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Carnival Game

Author

  • Una Kravets

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Carnival Game

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Tic-Tac-Toe

Author

  • Žiga Miklič

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Tic-Tac-Toe

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css