Masking a photo into a non-rectangular shape — a circle, star, hexagon, or pentagon — using CSS clip-path avoids needing to pre-process the image in an external editor, keeping the original file intact while just changing how it displays.
Upload a sample image and pick a shape from the dropdown, see it masked live in the preview, then copy the exact clip-path CSS value needed to apply the same shape mask to the image on your own site.
Because clip-path is applied purely through CSS, the same original image file works across multiple shape treatments on different parts of a site — swap the clip-path value without needing separate pre-cropped image assets for each shape.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Frequently asked questions
Does this modify or crop the actual image file?
No, this is a live CSS visual effect only — the underlying image file remains completely unedited; only its displayed shape changes.
Can I create my own custom shape beyond the presets?
Yes, any valid CSS clip-path polygon or shape function works — the presets here cover common shapes, but you can substitute your own custom clip-path coordinates for a fully custom outline.