CSSBattle
Recreate a target image in as few characters of CSS as possible, then watch somebody do it in half as many.
Opens in a new tab. We do not control this site and it may have changed since we catalogued it.
How to get the most from it
CSSBattle sits in Design Challenges under Make, filed as rabbit hole.
- Open it when the evening is free. It has no natural stopping point.
- Use a laptop or desktop computer — we file it as desktop only.
- It works with the sound off, so it is fine on a train or in a quiet office.
- Expect to create an account before you get far.
- Go in expecting something brainy, competitive and clever.
About this category: Kerning trials, alignment tests, colour matching and spot-the-difference for interface designers. Humbling in a useful way.
Good for
- A long evening with nothing planned
- Giving your brain a workout
- Chasing a better score
- Being impressed by a clever idea
- A quiet break at your desk
CSSBattle: quick answers
Is CSSBattle free?
Yes. CSSBattle is free to use, though it asks you to sign up.
Do I need an account to use CSSBattle?
Yes. CSSBattle asks you to create an account before you get far.
Does CSSBattle work on a phone?
Not well. We file CSSBattle as desktop only, so open it on a laptop or desktop computer.
Is CSSBattle safe for work?
Yes, we file it as safe for work. It also works muted.
How long does CSSBattle take?
We file it as "Rabbit hole": Clear your evening. We warned you.
More in Design Challenges
All 14 in Design ChallengesA hundred consecutive interface prompts delivered by email — the sign-up flow, the 404 page, the calculator, day by day.
Shoot the alien whose colour matches the hex code shown. Learning to read hex by sight is an accidental side effect.
- 2 min
- Desktop
Spot the serif among the sans-serifs before the timer runs out. Ten seconds long and disproportionately stressful.
- 2 min
- Desktop
Space the letters of a word by eye, then see the typographer's answer laid over the top of yours. Reliably humbling.
- 10 min
- Desktop
Same mood: brainy
All brainy sitesTower defence from the villain's side, defending your gems from heroes using demons, orcs and the undead.
- 10 min
- Desktop
GCHQ's public knife for decoding and decrypting data, built by dragging operations into a pipeline.
- 10 min
- Desktop
Long, carefully researched articles on forgotten disasters, obsessives and near misses from history.
- 1 hr+
Screenshots of manipulative interfaces caught in the wild, named and dissected. Grimly entertaining reading.
- 10 min
Keep exploring
Category
Time and mood
Have a site of your own? Suggest it for Detour or browse the AltFTool backlinks hub.