CSS Master · Drawing

Pixel Duel — HTML & CSS game

Rebuild the target with HTML and CSS. Every keystroke is rendered and compared pixel by pixel. Hit 100% to win, then try to beat Ada's character count.

0/ 36
easyTarget 1 of 12

Block

A single square in the top-left corner. Watch the edges.

body has an 8px margin by default in every browser. If your square sits 8px off the corner, that is why.

A div is a block: it takes the full width unless you give it a width.

index.html56 chars · Ada 107

Colours in the target · click to insert

…match

Your outputhover to compare

Target400 × 300

A

Ada · your rival

100% in 107 characters. Match her for 3 stars.

About Pixel Duel

Pixel Duel is an HTML and CSS game: recreate the target image with real code, see every pixel match, and tighten your CSS like a golf score.

What you practice

FAQ

What is Pixel Duel?
Pixel Duel is a free HTML/CSS recreation game on Playhire. You rebuild target images, get live pixel matching, and compete on how short your CSS can be.
Is Pixel Duel like CSSBattle?
Similar idea — recreate visuals with CSS — with Playhire’s pixel match, slide/diff compare and XP toward the CSS Master certificate.
Are these CSS Flexbox games free?
Yes. Every Playhire CSS game — Flex Escape, Flex Strike, Blueprint, Drone Dock and more — is free to play in the browser. Sign in only if you want XP, leaderboard rank and certificates.
Do I need to install anything to play a CSS game?
No. Open the game in your browser, write real CSS, and see the layout update instantly. No npm install, no signup required to start.

More CSS games