Shape
Preset
Drag the dots to reshape.
Top
10%Right
10%Bottom
10%Left
10%Round
0pxRadius
50%Center X
50%Center Y
50%Radius X
50%Radius Y
35%Center X
50%Center Y
50%Preview
CSS
Everything runs in your browser — nothing is uploaded.
Make the CSS `clip-path` property — which crops an element into any shape — right in your browser, without hand-writing the coordinates. Choose from four shapes. (1) Polygon mode lets you drag the on-preview points (handles) with your mouse or finger to reshape freely, while the `polygon(50% 0%, 0% 100%, …)` value updates live. Start from a preset — triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, cross, arrow, chevron or message bubble — and tweak it, adding or removing vertices with the "+ point / − point" buttons. (2) Inset mode crops to a rounded rectangle using top/right/bottom/left offsets (%) and a corner round (px). (3) Circle mode crops to a circle by radius and center, and (4) Ellipse mode to an ellipse by x/y radius and center. The preview uses a gradient fill so the crop edge is clearly visible, and you can choose whether to include the `-webkit-clip-path` prefix. The output is one or two lines of `clip-path: …;` you can copy straight into your CSS. Shaping, preview and code generation all run entirely in your browser and are never uploaded, stored, or sent to a server.
How to use
- Pick a shape (polygon / inset / circle / ellipse). For polygon, choose a preset to start from.
- In polygon, drag the points to reshape and use "+ point / − point" to change vertices; for the others, set offsets, radius and center with the sliders.
- Hit "Copy" to grab `clip-path: …;`. Add the `-webkit-` prefix if you need it.
FAQ
What is clip-path?
It's a CSS property that crops an element's visible area into a shape. Use `polygon()` for many-sided shapes, `circle()` and `ellipse()` for round shapes, and `inset()` for a rounded rectangle. It's handy for showing images or boxes as triangles, stars, speech bubbles and so on.
Can I make a triangle or star clip-path?
Yes. Polygon mode includes presets for triangle, trapezoid, rhombus, pentagon, hexagon, octagon, star, cross, arrow, chevron and message bubble. Start from one and drag the points to fine-tune the shape.
Can I drag points to reshape freely?
Yes. In polygon mode you can drag the handles (points) on the preview with mouse or touch, and the `polygon()` coordinates update live. You can also add or remove vertices with the "+ point / − point" buttons.
Do I need the -webkit- prefix?
Adding `-webkit-clip-path` is safer for older WebKit-based browsers. A checkbox lets you include it. Modern browsers work with the unprefixed `clip-path` alone.
Is my input uploaded anywhere?
No. Shaping, preview and CSS generation all run entirely in your browser and are never uploaded, stored, or sent to a server — the tool is fully local.