CSS Clip-Path Generator
Choose from a set of common shapes (circle, ellipse, triangle, pentagon, hexagon, star, message bubble, arrow) with a live preview, then copy the exact clip-path CSS value ready to use in your project.
Design & CSS Tools Runs entirely in your browser
All processing happens on your device — nothing is sent to a server.
Shape
CSS code
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
What this tool does
Generates CSS clip-path shapes — circle, ellipse, triangle, pentagon, hexagon, star, speech bubble and arrow — at a size you set, with a preview and ready code.
When to use it
- An element you want in a non-rectangular shape.
- An image you want clipped geometrically without editing the file.
- A speech bubble or arrow as an interface element.
- Trying shapes before writing their code by hand.
How to use it
- Choose the "Shape" from the list.
- Set the "Size".
- Copy the "CSS code".
A practical example
Input
A hexagon at a given size.
Output
Clip-path CSS cutting the element to a hexagon, with a preview before you copy.
Limitations
- Clipping hides what falls outside the shape without changing the element's area in the layout; neighbouring elements still treat it as a rectangle.
- Text inside a clipped element can be cut at the edges; adjust the padding.
- Shapes are defined in percentages so they adapt to the element's size — and can distort if its aspect ratio differs greatly.
Privacy and processing
The shape is generated on your device and nothing is sent to a server.
Technical notes
- The output is a standard CSS property rather than an image, so the shape stays crisp at any size and adds no file to the page.