CSS clip-path generator
Clip an image or a block into a polygon, circle or rounded rectangle with clip-path. Drag the points with the mouse and copy the CSS code.
- Free
- No sign-up
- No file uploaded
- Windows, Mac, Android, iPhone
Loading the tool…
About this tool
Draw the clipping shape of your images and blocks: 15 ready-made shapes (triangle, hexagon, star, arrow, speech bubble…), points you can drag with the mouse or move with the keyboard, plus circle and rounded rectangle modes. Try the shape on your photo and copy the CSS code.
When to use it
Original profile pictures and thumbnails
Hexagons, diamonds or stars give a visual identity to a team page or a gallery without editing each image.
Slanted sections
A four-point polygon slanted at the bottom of a banner creates a dynamic transition between two sections.
Badges and labels
Arrows, chevrons and bubbles are built in pure CSS, with no image or SVG.
How to use
- Pick a ready-made shape or a mode (polygon, circle, rectangle).
- Drag the points on the preview, add or remove some.
- Copy the clip-path code.
How it works
Each point is stored as a percentage of the element's width and height, with one decimal. The editor draws the points over the preview; moving them updates the polygon() value live.
Regular polygons and stars are computed with trigonometry (points spread on a circle). The generated code includes the -webkit- version for older Safari browsers.
Tips for best results
- Keep the points in outline order, otherwise the shape crosses itself.
- To animate between two shapes, use the same number of points in both.
- A box-shadow is clipped too: use filter: drop-shadow() on a parent instead.
- Test the shape on your real photo: a face can be cut by a corner.
Common problems and fixes
The element's shadow disappeared
clip-path also clips the shadow. Wrap the element in a parent and apply filter: drop-shadow() to the parent.
The shape crosses itself
The points are not in outline order. Remove the wrong point and add it back in the right place.
Clicks miss the element
Clipped areas no longer respond to clicks: that's by design, only the visible part is clickable.
Frequently asked questions
What is clip-path for?
The property clips an element to a shape: everything outside becomes invisible. It creates hexagonal images, slanted banners or badges without editing images.
Which shapes are possible?
polygon() for any shape with straight edges, circle() and ellipse() for round shapes, inset() for a rectangle with margins and rounded corners.
Does the shape adapt to the element size?
Yes: points are in percentages, so the shape follows the size of the image or block.
Can a clip-path be animated?
Yes, between two polygons with the same number of points: CSS interpolates each point's position.
Related searches
Still stuck?
Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.