About CSS clip-path
This tool generates CSS clip-path shapes — circle, ellipse, triangle, hexagon, star, arrow and more — with a live preview and copy-ready code. The clip-path property crops an element to a shape without needing images or masks.
How Clip Path Generator works
How to use it
- Pick a shape to preview it.
- Copy the clip-path CSS.
- Apply it to an element that has a width and height.
How it works
clip-path defines a region; anything outside it is hidden. Basic shapes like circle() and ellipse() and polygon() with percentage points let you cut an element into almost any flat shape, with no extra markup.
Common uses
- Create a CSS shape
- Crop an element to a circle
- Make a hexagon or star
- Design angled section dividers
- Cut images into shapes
- Build decorative UI
- Avoid image masks
- Learn clip-path syntax
Frequently asked questions
What is clip-path?
A CSS property that crops an element to a shape.
Do I need an image?
No — shapes are defined in CSS.
Does the element need a size?
Yes — give it a width and height for the shape to show.
Can I make custom polygons?
These presets cover common shapes; polygons use percentage points.
Is it supported in browsers?
Yes — clip-path is widely supported in modern browsers.
Are my inputs uploaded?
No — it runs in your browser.
Can I clip an image?
Yes — apply the clip-path to the image element.
Is it free?
Yes — completely free with no sign-up.