Free CSS Clip Path Generator Online

What is a CSS clip path generator?

A CSS clip path generator is a browser tool that writes clip-path values from polygon, circle, ellipse, or inset handles. It follows the clip-path property in CSS Masking Module Level 1 and the basic shape functions in CSS Shapes Module Level 1. You drag points, then copy the CSS.

TestMu AI keeps the math in your tab. All processing happens in your browser. No data is uploaded. Pair it with the CSS Triangle Generator when you only need a three-point caret, or the Gradient Generator when the clipped box should show a fill.

How does a CSS clip path generator work?

The generator stores each handle as a percentage of the preview box. Percentage coordinates start at the top left (0% 0%) and end at the bottom right (100% 100%). A default triangle is polygon(50% 0%, 100% 100%, 0% 100%). That value scales with the element, which is the usual choice for UI crops.

Section 5 of CSS Masking Module Level 1 says a clipping path changes paint, not layout. The element keeps its width and height. Neighbors do not wrap around the silhouette. MDN clip-path lists the same four basic shapes this tool writes, plus path() and url() for SVG clipPath references.

Generate snapshots the live value into CSS, HTML, and Tailwind boxes. The CSS block writes both -webkit-clip-path and clip-path. Tailwind uses the arbitrary property form with spaces turned into underscores.

How do you use this CSS clip path generator?

The generator writes clip-path from the live preview. Pick a shape, drag the handles, then Generate to fill the CSS, HTML, and Tailwind boxes.

• Pick a shape mode. Choose Polygon, Circle, Ellipse, or Inset. Polygon accepts presets and free handles. Circle, ellipse, and inset use radius or inset sliders plus drag handles.
• Load a preset or drag the handles. The 15 presets fill polygon points. Drag a handle to move it. Double-click a polygon handle to remove it (minimum 3). Add Point inserts a midpoint on the longest edge.
• Set snap, fill rule, and preview fill. Snap to grid rounds points to 5 percent. Even-odd writes holes in overlapping loops. Pick a fill color or drop an image onto the preview.
• Paste an existing clip-path if you have one. The parser accepts polygon(), circle(), ellipse(), and inset() values, with or without the clip-path: prefix.
• Generate, then copy or download. Generate writes the CSS, HTML, and Tailwind boxes and scrolls to them. Use the icon strip to copy or save a file. Download PNG exports the clipped preview.

What features does this CSS clip path generator include?

The widget covers the four basic shapes from CSS Shapes Module Level 1 and the even-odd fill rule that CSS polygon() accepts. These are the controls you get in this tab:

• Four shape modes: Polygon, circle, ellipse, and inset with a live preview that updates as you drag.
• 15 polygon presets: Triangle through hexagon, star, arrows, chevron, trapezoid, parallelogram, and a chat bubble.
• Even-odd fill rule: Writes polygon(evenodd, ...) so overlapping loops can punch a hole.
• Snap and nudge: A 5 percent grid, plus arrow keys or the Up Down Left Right buttons on a selected point.
• Paste to edit: Drop an existing clip-path value into the paste field and Apply to load the handles.
• CSS, HTML, and Tailwind: Generate writes all three. Download PNG exports the clipped preview as a transparent file.
• Local preview image: Upload, drop, or paste a photo. The file never leaves this tab.

When should you use CSS clip-path in UI work?

Use clip-path when a rectangle or border-radius cannot describe the crop. The clipped box still takes its full space, so you plan padding and overlap yourself. Common jobs:

• Avatar crops. circle(50%) on an img. Check the crop against a real photo in the preview.
• Diagonal section breaks. A 4-point polygon cuts one edge of a hero without an extra SVG file.
• Hex badges and tags. Load the hexagon preset, then drop the CSS onto a label in a Flexbox Generator row.
• Rounded photo frames. inset() with a corner radius crops inward. Pair corner work on the box itself with the Border Radius Generator.
• Visual QA. After you paste the CSS, check hit testing on TestMu AI real device cloud across 10,000+ real devices and, separately, 3000+ browsers, because overflow and subpixel rounding still differ.

Layout around a clipped cell often starts in the CSS Grid Generator. Contrast of a pale crop on white is an accessibility testing concern when the remaining pixels are the only cue.

What is the difference between clip-path and mask-image?

CSS Masking Module Level 1 defines both clipping and masking. Clipping is a hard inside or outside cut. Masking uses an image or gradient as alpha. Overflow hidden only crops to the padding box.

Filter experiments on a nearby photo belong in the CSS Filter Generator. Keep clip-path for the silhouette and filters for blur or contrast.

Frequently Asked Questions (FAQs)

What is the CSS clip-path property?

The CSS clip-path property cuts an element's paint to a geometric region. Pixels inside the shape stay visible. Pixels outside are discarded. CSS Masking Module Level 1 defines the property. You can pass polygon(), circle(), ellipse(), inset(), or a url() to an SVG clipPath.

Does clip-path change the layout size of an element?

No. Section 5 of CSS Masking Module Level 1 states that a clipping path affects rendering, not geometry. The element still occupies its original width and height in the document flow. Neighboring boxes do not wrap around the visible silhouette. Use shape-outside on a float if you need text to follow the edge.

Can I animate clip-path in CSS?

Yes, when both keyframes use the same function and the same number of points. A 6-point polygon can morph into another 6-point polygon. A 3-point triangle cannot interpolate to a 6-point hexagon and will jump. circle() can transition to another circle(). This generator writes a static value. You add the transition in your stylesheet.

What browsers support clip-path?

Current Chrome, Firefox, Edge, and Safari paint polygon(), circle(), ellipse(), and inset() without a prefix. MDN marks clip-path as Baseline widely available since January 2020. Internet Explorer 11 does not implement those basic shapes. This tool also writes -webkit-clip-path for older WebKit.

How do clip-path coordinates work?

Percentage coordinates are relative to the element's own box, starting at the top left (0% 0%) and ending at the bottom right (100% 100%). polygon(50% 0%, 100% 100%, 0% 100%) is a triangle that scales with the element. Absolute lengths such as px stay fixed when the box resizes.

How do I clip an image to a shape in CSS?

Apply clip-path directly to the img or to a wrapper that holds a background-image. A common avatar crop is circle(50%) on the image. The image file is not rewritten. The browser still downloads the full bitmap and paints only the clipped pixels. Drop a preview photo in this tool to check the crop.

Do I need a -webkit-clip-path prefix?

Current evergreen browsers accept unprefixed clip-path. Safari versions before 13.1 needed -webkit-clip-path for basic shapes. This generator writes both lines so a stylesheet still clips on older iOS WebKit. Check the pair on TestMu AI if you still support those versions.

How do I make a hole in a clip-path shape?

Use polygon() with the even-odd fill rule. Draw the outer outline, then a second loop that sits inside it. evenodd treats the inner loop as a hole. Nonzero, the default, fills both loops. This tool's Even-odd control writes polygon(evenodd, ...) for the current points.

Why is my clip-path not showing?

Check commas between coordinate pairs and a space between x and y. A missing % unit is a common miss. If you used url(#id), the SVG clipPath must exist in the same document. A parent with overflow hidden can also hide the silhouette. Compare your rule to the preview in this tool.

Does this CSS clip path generator upload my image?

No. Shape points, the fill color, and any preview image stay in memory in this tab. There is no account and no server round trip. All processing happens in your browser. No data is uploaded. Close the tab and the values are gone.