CSS Clip-Path Builder
DesignVisually craft intricate clipping regions for your web elements. Drag points to create custom polygons or choose from our extensive library of common UI shape presets.
Interactive Canvas
Visual Presets (Polygon)
Shape Type
CSS Output
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);Mastering Clip-Path
polygon()
Define a custom shape using a set of vertices. Perfect for triangles, stars, and complex geometric paths.
circle()
Defines a circular clipping area. You can specify the radius and the center position easily.
ellipse()
Defines an elliptical clipping area. Similar to circle but with independent horizontal and vertical radii.
inset()
Defines a rectangular inset from the element edges, supporting rounded corners with the `round` keyword.
Clip-Path Builder FAQs
The `clip-path` CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Select a shape type (Polygon, Circle, etc.) or choose a preset. Drag the points on the visual canvas to refine your shape. The CSS code will update instantly for you to copy.
Presets are ready-to-use shapes like triangles, stars, and arrows. Clicking a preset instantly applies it to the canvas, allowing you to use it immediately or customize it further.
Yes, the editor is responsive and touch-friendly, allowing you to build and preview shapes on any device.