A CSS clip-path generator creates a CSS value that masks an element into a polygon, circle, ellipse, or inset shape. Adjust the visual controls, copy the generated CSS, and test the result in the browsers your project supports.
How to use a CSS clip-path generator
A CSS clip-path generator creates a CSS clip-path value that masks an element into a polygon, circle, ellipse, or inset shape. Use the generated CSS in a stylesheet, then test the result across the browsers your project supports.
How does CSS clip-path shape an element?
The CSS clip-path property clips an element to a defined shape or path. Pixels outside that shape are not painted, while the element's layout box still occupies its normal space. Clipping does not change an image's intrinsic dimensions or remove an element from the document flow.
Common basic shapes include circle(), ellipse(), inset(), and polygon(). A polygon uses coordinate pairs such as polygon(0 0, 100% 0, 100% 100%) to describe its corners. Percentages allow the shape to respond to the element's size.
How do you generate a clip-path shape?
Choose a shape, adjust its points or dimensions, and copy the resulting declaration.
Choose polygon, circle, ellipse, or inset to match the design.
Adjust the preview until the visible boundary is in the right place.
Copy the generated declaration into the selector for the element.
Test the component with real content and several viewport widths.
Check keyboard focus and reduced-motion behavior if the shape animates.
CSS provides basic shape functions for common clipping boundaries.
Shape
Useful for
Example
circle()
Circular avatars or badges
circle(45% at 50% 50%)
ellipse()
Oval crops
ellipse(45% 35% at 50% 50%)
inset()
Rectangular crops
inset(5% 10% round 12px)
polygon()
Custom silhouettes
polygon(0 0, 100% 0, 80% 100%)
How do you test generated clip-path CSS?
Test the declaration where it will run. Resize the viewport, replace placeholder copy with the longest expected content, and inspect focus indicators. A clipped focus outline can make keyboard navigation difficult to see even when the shape looks correct.
Support can differ by value and browser version. Check the exact declaration in the MDN clip-path reference. Keep an unclipped fallback when the shape is decorative, and do not hide essential information only through a visual mask.
Frequently asked questions
What shapes can the tool generate?
The tool generates polygon, circle, ellipse, and inset clip-path values. These cover the four CSS basic shape functions that browsers support for clip-path. Path() using SVG path data is not currently supported in the visual editor; you can manually enter path() values in the code editor panel.
Does clip-path work on all browsers?
Clip-path with basic shape functions (polygon, circle, ellipse, inset) has full support in all modern browsers including Chrome, Firefox, Safari, and Edge. The tool outputs the -webkit-clip-path prefix for older Safari versions. Internet Explorer does not support clip-path with CSS shapes (only SVG clipPath references), but IE has been retired and is not a target for modern projects.
Can I animate clip-path with CSS transitions?
Yes, if both the start and end states use the same shape function with the same number of points. For example, you can transition between two polygon() values with the same number of coordinate pairs. The tool can generate paired start/end states for a transition by letting you define and switch between two shape configurations.
How do I clip-path an SVG instead of an HTML element?
Apply clip-path directly to the SVG element or to individual SVG child elements using the same CSS property. The coordinate system for SVG elements defaults to the SVG viewport, not percentages of the element's bounding box, so you may need to adjust coordinates accordingly. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
What happens to content outside the clip region?
It is hidden visually but still exists in the DOM. Screen readers can still access it, and it still occupies space in the layout (clip-path does not affect the box model). For interactive elements (links, buttons) inside a clipped area, the clickable region follows the clip shape.
What is the difference between clip-path and mask?
Clip-path creates a hard-edged clipping region: pixels are either fully visible or fully hidden. The mask property (from the same CSS Masking spec) uses an image or gradient to apply partial transparency, allowing soft or blurred edges. Use clip-path for crisp geometric shapes; use mask for soft or image-based masking.
clip-path hides everything outside a shape you define. Use it for angled section edges, arrow badges, hexagon avatars or a circle reveal. The visualizer lets you drag polygon points, or tune circle, ellipse and inset shapes with sliders, and outputs webkit-safe CSS.
Choosing a shape
polygon() takes a list of x and y points, in percentages for a shape that scales. circle() and ellipse() take a radius and a center. inset() makes a rectangle with optional rounded corners, handy for reveals.
Start with a preset, then drag points. Keep the point count low. Every extra point is another number to maintain.
Animating and compatibility
You can transition clip-path between two shapes with the same number of points. Mismatched point counts won't animate smoothly. Support is solid in current browsers, and the -webkit- prefix is included for older Safari.
For SVG content, use the SVG clipPath element, or apply CSS clip-path to the SVG itself. Clip-path cuts a hard edge. A mask can fade it softly with an image or gradient.
Your shapes stay in your browser.
Shapes you can build
With clip-path you can cut an element into a triangle, hexagon, arrow, chevron or any polygon without an image. Each point is a pair of percentages measured from the top-left corner. Four points make a quadrilateral, six make a hexagon.
Circles, ellipses and insets work too. An inset can give you rounded notches, and a circle with a position lets you reveal a section from a point, which is nice for hover effects.
Drag points on the canvas and watch the code change. Copy the result with the webkit-prefixed version for older Safari.
Things that trip people up
Clipped areas still take up their original space, so the layout doesn't shift. Shadows and borders get cut as well. If you want a shadow on a clipped shape, put it on a wrapper with filter drop-shadow.
Clicks outside the clipped area don't register, which is usually what you want. And keep an eye on accessibility: a clever shape shouldn't hide text that someone needs to read.
A worked example: an arrow badge
Say you want a banner with a pointed right edge. Use polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%). The first two points run along the top, the third is the tip, and the last two come back along the bottom.
Change 85% to 92% and the point gets shallower. Change 50% to 30% and the tip moves up. Drag the handle in the visualizer and watch those numbers move, which is faster than guessing.
Put padding on the right side of the text so the words don't run into the cut. The clip hides pixels but doesn't push content out of the way.
When the shape looks wrong
A shape that looks stretched usually means the element isn't the size you think. Percentages measure the element's own box, so a banner 600 wide and 80 tall gives a very different slope than a square.
If nothing is clipped at all, check for a typo in the unit or a missing comma between points. Browsers ignore an invalid clip-path without any warning.
Lastly, if hover effects feel off, remember that the pointer only reacts inside the visible shape. Test with the mouse near the cut edges.