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