CSS games
Breakpoint lists 21 games to learn CSS, link-checked every 12 hours. Updated 24 Oct 2026.
From quick browser puzzles to longer challenges, free and paid. A person played each one before it was listed.
21 games
- 24 daily CSS builds from Figma designs and starter files24 daily CSS builds from Figma designs and starter files
- Write CSS selectors against the clock to match marked elementsWrite CSS selectors against the clock to match marked elements
- Recreate target images with as little CSS as possibleRecreate target images with as little CSS as possible
- Move circles into place by changing flexbox settings, no code neededMove circles into place by changing flexbox settings, no code needed
- Write flexbox CSS to help King Arthur win back his goldWrite flexbox CSS to help King Arthur win back his gold
- Write CSS Grid code to help Rey rescue her brother from demonsWrite CSS Grid code to help Rey rescue her brother from demons
- Write flexbox code to aim your crossbow and survive the zombiesWrite flexbox code to aim your crossbow and survive the zombies
- Place defense towers with flexbox CSS to stop the enemiesPlace defense towers with flexbox CSS to stop the enemies
- Water a carrot garden by writing CSS grid codeWater a carrot garden by writing CSS grid code
- Write flexbox CSS to guide frogs onto lily padsWrite flexbox CSS to guide frogs onto lily pads
- Pick items off a dinner table using CSS selectorsPick items off a dinner table using CSS selectors
- CascadePaidAnswer rapid-fire CSS microgames on flexbox, grid, selectors and moreAnswer rapid-fire CSS microgames on flexbox, grid, selectors and more
- CSS ScoopsPaidServe ice cream orders by writing CSS selectorsServe ice cream orders by writing CSS selectors
- Judge which of two CSS selectors wins on specificityJudge which of two CSS selectors wins on specificity
- Nth CartPaidPick the right mine carts with :nth-child() selectorsPick the right mine carts with :nth-child() selectors
- CSS SurgeonPaidUse CSS transforms to put a patient's missing organs backUse CSS transforms to put a patient's missing organs back
- Tailwind TrainerPaidDrill Tailwind 4 utility classes in short, changing lessonsDrill Tailwind 4 utility classes in short, changing lessons
- AnchoreumPaidLabel museum exhibits using CSS anchor positioningLabel museum exhibits using CSS anchor positioning
- Grid CrittersPaidLearn CSS Grid by writing real code in a story courseLearn CSS Grid by writing real code in a story course
