Skip to main content

How to play ScramboCSS

ScramboCSS is a quick CSS game where real CSS features are scrambled into tiles. Decode the answer, keep the symbols in the right place, and solve each level as fast as you can.

Start playingView leaderboard
Live scramblefunction / 11 chars
x-miroloc()
decode:

What is ScramboCSS?

ScramboCSS is a browser-based CSS unscramble game for frontend developers and learners. Each run gives you 10 levels built from real CSS terms, including properties, selectors, at-rules, pseudo-classes, pseudo-elements, functions, keywords, and modern CSS features.

How a run works

  1. Watch the tiles land.The timer starts after the falling letter animation finishes, so you are not punished during setup.
  2. Type the real CSS feature.Answers are case-forgiving, but required symbols still count.
  3. Score with speed.Each level can last up to 60 seconds. Faster solves earn more points.
  4. Finish 10 levels.At the end, you get a score report, review breakdown, share options, and leaderboard links.

Symbols matter

ScramboCSS is built for real CSS syntax, so symbols are not decoration. @media, :has(), ::before, color-mix(), and grid-template-columns must be typed with their syntax intact.

Tips for better scores

  • Look for punctuation first. It often tells you whether the answer is an at-rule, selector, or function.
  • Use the one reshuffle charge only when the tile order is slowing you down.
  • Keep an eye on the feature tag. It gives the category, length, and difficulty without revealing the answer.
  • Replay to learn patterns. CSS terms become easier to recognize after a few runs.