We can make puzzle pieces in CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

A step-by-step guide to building CSS puzzle pieces using the modern `clip-path: shape()` function. Starting from a single configurable piece with tabs and sockets controlled via CSS custom properties, the tutorial progresses to generating a full grid of interlocking pieces using JavaScript for neighbor-matching logic. It also covers placing real image content inside the pieces by calculating background-size and background-position dynamically. The technique separates geometry (CSS), variability (custom properties), and piece relationships (JavaScript) for a reusable, flexible pattern.

Let’s Get Puzzled! – Frontend Masters Blog

Step 2: Generate Multiple Pieces that Actually Fit Together