CSS Clip-path Builder
Click on the canvas to add points.
Drag handles to move.
Right-click a handle to remove.
Understand CSS Clip-path Builder
Builds CSS clip-path shapes — polygon, circle, ellipse, and inset — visually, and outputs the property to paste.
How it works
clip-path defines a region and everything outside it is not painted. `polygon()` takes a list of `x% y%` points measured from the top-left of the element's box, so `polygon(50% 0, 100% 100%, 0 100%)` is a triangle; `circle()` and `ellipse()` take radii plus an `at` position; `inset()` takes top, right, bottom, and left insets with an optional `round` radius. Percentages resolve against the element's own box on each axis independently, which means the shape stretches with the element rather than keeping its proportions.
When to use it
- Cutting a diagonal or angled edge on a section divider without exporting an image
- Masking an image or a video into a non-rectangular frame in pure CSS
- Building an arrow, chevron, badge, or ribbon shape that would otherwise need a background image
- Creating a reveal animation by transitioning between two polygons
Watch out for
- Clipping does not change layout. The element still occupies its full box, so neighbours do not move into the space you cut away — add negative margin or adjust spacing yourself.
- Percentages are per axis, so a shape distorts as the element resizes. A 45° diagonal at one width is not 45° at another; use pixel or viewport units when the angle has to hold.
- Transitions between polygons only interpolate when both have the same number of points in the same order. Add repeated points to pad the shorter shape rather than expecting the browser to match them up.
- A clip-path clips everything the element paints, including its box-shadow, outline, and focus ring. A clipped button can lose its visible focus indicator entirely, which is an accessibility regression.
Frequently Asked Questions
What shapes can clip-path create?
Four shape functions: polygon() for arbitrary n-sided shapes (drag the control points), circle() for perfect circles with center and radius, ellipse() for ovals, and inset() for rectangular clips with optional rounded corners via border-radius.
How do I create a diagonal section divider with clip-path?
Use polygon() on the section container: polygon(0 0, 100% 0, 100% 90%, 0 100%). This clips the bottom-right corner diagonally, creating a slanted bottom edge. Adjust the percentages to change the diagonal angle and direction.
Does clip-path affect layout flow?
No — clip-path only affects the visible rendering. The element still occupies its full original dimensions in the layout, which can cause invisible hit areas or overflow gaps. Add overflow: hidden to the parent if spacing looks wrong.
How to Use CSS Clip-path Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.