CSS Clip-Path Generator

Choose a shape — polygon, inset, circle or ellipse — and drag the vertices to reshape it. The clip-path CSS updates live and is ready to copy.

This clip path generator cuts an element into a shape and hands you the clip-path CSS to reuse. Start from a preset — triangle, rhombus, hexagon or star — then drag the vertices right on the preview to reshape the polygon, or switch to inset, circle and ellipse for simpler cuts. It works as a polygon clip path tool where every dot you move rewrites the polygon() value live. Copy the shape clip css when it looks right; this css clip-path maker keeps everything in your browser.

Drag any vertex on the preview to reshape the polygon.

CSS
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

How it works

  1. 1

    Choose a shape

    Pick polygon for custom shapes, or inset, circle and ellipse for rectangular and round cuts.

  2. 2

    Drag the vertices

    On a polygon, drag any dot on the preview to move that vertex, or add points for more complex shapes with this polygon clip path tool.

  3. 3

    Copy the clip-path

    Copy the clip-path rule and apply it to your image or element. The visible area is clipped to your shape.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

What does clip-path actually do?
It hides everything outside the shape you define, so an image or box shows only inside that outline. The element still takes its normal space; only what you see is clipped.
How do polygon percentages work?
Each pair is an x and y position inside the element, from 0% at the top-left to 100% at the bottom-right. The vertices you drag map straight to those percentage pairs.
What is the difference between circle and inset?
circle clips to a round area with a radius you set, while inset clips to a rectangle by trimming a percentage off each edge. inset can also round its corners.
Does clip-path affect where I can click?
Yes. Pointer events only land on the visible, clipped area, so the trimmed-away corners of an image no longer capture clicks.
Is clip-path supported everywhere?
Polygon, circle, ellipse and inset clip paths work in all current browsers. The generator outputs the standard property so you can paste it as-is.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.