CSS Clip Path Generator
Generate CSS clip-path shapes visually. Drag polygon points, adjust circles and ellipses, and copy the generated code.
About CSS Clip Path Generator
The CSS clip-path property clips an element to a shape, hiding everything outside it. It accepts four shape functions: polygon (custom shapes with any number of points), circle, ellipse, and inset (rectangle with optional rounding). This generator gives you a visual editor with draggable control points, shape presets, and live preview.
The clip-path Shape Functions
| Function | Syntax | What It Does |
|---|---|---|
| polygon() | clip-path: polygon(x1 y1, x2 y2, ...) | Creates a shape from connected points (percentages or lengths) |
| circle() | clip-path: circle(radius at cx cy) | Circular clip with a centre position |
| ellipse() | clip-path: ellipse(rx ry at cx cy) | Oval clip with horizontal and vertical radii |
| inset() | clip-path: inset(top right bottom left round radius) | Rectangular clip with optional rounded corners |
Example output:
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
This creates a pentagon shape. All coordinates use percentages, so the shape scales with the element.
Common Polygon Shapes
The preset buttons load these common shapes as starting points. You can drag any point to customise further.
| Shape | Points | CSS |
|---|---|---|
| Triangle | 3 | polygon(50% 0%, 0% 100%, 100% 100%) |
| Pentagon | 5 | polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) |
| Hexagon | 6 | polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) |
| Star | 10 | Alternating inner and outer points |
| Arrow right | 7 | polygon(0% 25%, 65% 25%, 65% 0%, 100% 50%, 65% 100%, 65% 75%, 0% 75%) |
| Cross | 12 | Four arms with right angles |
| Chevron | 6 | V-shape pointing right or down |
When to Use clip-path vs border-radius
| clip-path | border-radius | |
|---|---|---|
| Shape variety | Any shape - polygons, circles, custom outlines | Only rounded rectangles, circles, and ellipses |
| Content outside shape | Completely hidden (clipped) | Still there (visible at corners unless overflow is hidden) |
| Affects box model? | No - element still occupies full rectangle for layout | No |
| Clickable area | Only the clipped area is interactive | Full rectangle is still interactive |
| Box shadow | Shadow follows the rectangular box, not the clip | Shadow follows the rounded corners |
| Performance | Good - hardware accelerated in modern browsers | Good |
| Animation | Can animate between shapes with the same number of points | Easily animatable |
Use border-radius for simple corner rounding. Use clip-path when you need non-rectangular shapes like triangles, hexagons, stars, or custom paths.
Practical Uses for clip-path
| Use Case | Shape | Notes |
|---|---|---|
| Hero section divider | Angled polygon | Clip the bottom of a hero to create a diagonal edge |
| Image masks | Circle, polygon, custom | Clip photos into non-rectangular frames |
| Reveal animations | circle() growing from 0% | Animate the radius to reveal content |
| Card corner cuts | Polygon with notched corners | Decorative card designs |
| Tooltip arrows | Small polygon override | Combine with positioned elements |
| Scroll-triggered reveals | inset() changing values | Animate inset to reveal from edges |
Animating clip-path
You can transition clip-path values if the shapes have the same number of points and same function type. The browser interpolates between the coordinate values:
transition: clip-path 0.3s ease;
This works well for hover effects (expanding a circle reveal, morphing between shapes) and scroll-triggered animations. Note that you cannot transition between different shape types (e.g., polygon to circle) - both states must use the same function.
Browser Support
The clip-path property with basic shapes is supported in all modern browsers. Chrome, Firefox, Safari (with -webkit-), and Edge all support polygon(), circle(), ellipse(), and inset(). For Safari, the -webkit-clip-path prefix may still be needed in older versions. The tool includes both prefixed and unprefixed properties in its output.
For rounded corner designs without clipping, the CSS Border Radius Generator handles the border-radius property. For depth effects, the CSS Box Shadow Generator creates layered shadows.
Everything runs in your browser. No data is sent to any server.
Frequently Asked Questions
What clip-path shapes are supported?
The tool supports all standard CSS clip-path shapes. Polygon lets you create custom shapes with any number of points. Circle creates a circular clip. Ellipse creates an oval clip. Inset creates a rectangular clip with optional rounded corners.
How do I drag polygon points?
In polygon mode, white circle handles appear on the preview at each point. Click and drag any handle to reposition it. The coordinates update in real time and the CSS output reflects the new positions instantly. You can also add or remove points from the list below.
Can I use an image as the preview background?
Yes. Toggle the "Image preview" checkbox to see your clip path applied to a sample photograph. This is useful for visualizing how the shape will mask real content. When toggled off, a solid color is used instead.
What is the inset shape for?
The inset shape creates a rectangular clip with adjustable margins on each side. It is useful for cropping elements without polygon complexity. The optional round parameter adds border radius to the inset rectangle.
Is this tool free and private?
Completely free with no account needed. All calculations run in your browser. Nothing is uploaded to any server, so your work remains private.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/css-clip-path-generator/" title="CSS Clip Path Generator - Free Online Tool">Try CSS Clip Path Generator on ToolboxKit.io</a>