Hello, and welcome to CSS Hell, where you will be subjected to 15 unimaginably torturous CSS puzzles. "What did I do to deserve this?", you ask. But you know perfectly well: you blasphemed Cascading Style Sheets. I saw that time your friends were complaining about CSS and you piled on with "CSS isn't even a real programming language". It is. I saw you upvote that Reddit meme about vertically aligning a div. Just use a flexbox. I saw you chuckle sensibly at those CSS Is Awesome designs. I couldn't stand to let Håkon Wium Lie's divine creation be slandered in this way, so I decided to show the nonbelievers like you the wrath of CSS's unhinged power.

The mechanics of the puzzles are simple: for each peg, there is a hole, and each peg must overlap (even just a little) with its corresponding hole. To accomplish this, you will add CSS properties to certain divs. Click on any div to see its properties and add your own. All divs have a limit on the number of properties that can be added (usually just one or two), and some are "locked" (no properties can be added). In general, any CSS property is allowed, with a few exceptions that you may stumble across. For that reason, I would recommend keeping the MDN CSS Reference handy. There is also a hint button and, should you require mercy, solutions can be found in the GitHub repository. I've tested each puzzle on Safari, Firefox, and Chrome (Safari requires version 17). You'll never need to open up the developer console or modify the page directly.

Thus concludes my monologue. Good luck; you'll need it.
Welcome to CSS Hell, the puzzle game for CSS masochists! So, when I made this site as a birthday gift in 2023, I didn't design it for smaller screens, so I would recommend opening this site on a desktop. If you want to try anyway, though, don't let me stop you.

In the meantime, enjoy this gameplay screenshot:

A screenshot of the gameplay

OSZAR »