CSS Shape
Match the target shape with real CSS: sizes, corners, transforms and flexbox.
Games
CSS Shape
Change the values until your shape matches the target. 98% solves the level.
About this game
CSS Shape is a puzzle for learning CSS by eye. On the left is a faded target shape; on the right, your shape, drawn by real HTML elements with your values. Tune width, height, border-radius, transform, colors, clip-path, flexbox and inset until they match.
30 handmade levels go from a simple square to combinations. Every solved level shows the final CSS with a Copy button, so you can use it in your own project.