Design & Type / CSS Battle
CSS Battle
Recreate a target image in as few bytes of CSS as possible. Competitive, humbling, weirdly addictive.
Visit cssbattle.dev Freemium #css#games#challenge
Websites like CSS Battle
Grid Garden
The same trick as Froggy, but for CSS grid. Water your carrots with grid-column-start.
Grid Garden
The same trick as Froggy, but for CSS grid. Water your carrots with grid-column-start.
Flexbox Froggy
Learn CSS flexbox by guiding frogs onto lily pads. Twenty-four levels and it finally sticks.
Flexbox Froggy
Learn CSS flexbox by guiding frogs onto lily pads. Twenty-four levels and it finally sticks.
UI Colors
Type in one brand colour and get a full Tailwind-style shade scale from 50 to 950, ready to copy.
UI Colors
Type in one brand colour and get a full Tailwind-style shade scale from 50 to 950, ready to copy.
Hero Patterns
A collection of subtle repeating SVG background patterns. Choose colours and opacity, then copy a single line
Hero Patterns
A collection of subtle repeating SVG background patterns. Choose colours and opacity, then copy a single line
Method of Action
Tiny games that train a designer's eye: kern the letters, trace curves with the pen tool, match the colour. Yo
Method of Action
Tiny games that train a designer's eye: kern the letters, trace curves with the pen tool, match the colour. Yo
Type Scale
Pick a ratio and preview a whole typographic scale in your own font, then copy the CSS straight out.
Type Scale
Pick a ratio and preview a whole typographic scale in your own font, then copy the CSS straight out.