UseFreeTools

CSS Clip-Path and Shape Generator

Create polygon, circle, ellipse or inset clip shapes using validated percentage coordinates.

Inputs stay on your device No sign-up Free to use
How this works

The tool runs in this browser. Your file or text is not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Privacy details

3–30 rows, each with two percentages from 0 to 100 separated by a tab. A closed polygon joins the last point to the first.

CSS percentage circle radius follows the reference-box normalized diagonal.

Processed in your browser. Your inputs stay on this device.

Showing a generated example. Generate again for a new result.

How to use CSS Clip-Path and Shape Generator

  1. Choose a shape and enter its supported percentage coordinates.
  2. Review the shape on the native sample preview.
  3. Copy the CSS and check clipping, focus and fallback behavior in your page.

Example: CSS Clip-Path and Shape Generator

Polygon vertices 0,0; 100,0; 50,100.

You add
Clip shape: polygon Polygon points: x percent, tab, y percent: 0 0 100 0 50 100 Circle or ellipse center X (%): 50 Circle or ellipse center Y (%): 50 Circle radius (%): 40 Ellipse radius X (%): 45 Ellipse radius Y (%): 30 Inset top (%): 10 Inset right (%): 10 Inset bottom (%): 10 Inset left (%): 10
You get
Generated a polygon clip path.

Options

Shape and coordinates
Choose polygon, circle, ellipse or inset and enter its supported percentage coordinates. Percentages depend on the target reference box.
Preview content
The local sample helps inspect the outline. It does not measure the dimensions or clickable areas of an element on another page.

Supported inputs and limits

Up to 30 polygon vertices and documented percentage values. No arbitrary CSS, URLs or external resources. Clipping hides visual content and can hide focus outlines; preserve an accessible fallback. The generated shape does not implement a visual drag editor or certify browser compatibility.

Where your input is processed

This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Clipping changes visibility

A clipped element still needs a usable focus state and readable content. Check the copied rule on the actual box, especially after it resizes or gains text. A successful polygon can cut away meaningful information or part of an interactive control. Keep an unclipped alternative when the shape is decoration rather than essential structure.

Questions about CSS Clip-Path and Shape Generator

Does clipping change the element’s layout box?

No. The surrounding layout still uses its box even when some of its drawing is clipped.

Can I clip an interactive control safely?

Check focus visibility and interaction in the actual page; a decorative preview does not establish that behavior.

Can coordinates reference a remote SVG?

No. This generator creates the supported local basic shapes only.

Project manager: Tony Hines · Content updated 4 October 2026 · Report a problem

Related tools

All tools in Developer