# Clip Path Generator

Canonical URL: https://offlineutils.com/clip-path-generator
Category: CSS
Published: 2026-07-15
Publisher: offlineutils.com
Runs entirely in the browser; nothing entered into the tool is uploaded.

> A Clip Path Generator builds a CSS clip-path value — polygons with draggable vertices, plus circle, ellipse, and rounded inset shapes — from a live visual editor, and copies the exact clip-path declaration, all in your browser.

clip-path crops an element to a shape without altering the underlying content. This generator lets you start from preset polygons (triangle, hexagon, star, arrow, message, and more) and drag any vertex to reshape it, add or remove points, or switch to circle, ellipse, or rounded-inset modes with sliders. The live preview shows the clip against a gradient so you can judge the result, and the copy-ready output uses percentages so it scales with the element. Nothing is uploaded.

## Features

- Draggable polygon vertices with add and remove
- Presets: triangle, hexagon, octagon, star, arrow, chevron, message, and more
- Circle, ellipse, and rounded-inset modes with sliders
- Percentage-based output that scales with the element
- Live preview over a gradient
- Runs entirely in your browser — nothing uploaded

## Use cases

- Cutting a diagonal or angled section edge on a landing page
- Making a hexagon or circle avatar frame without an image mask
- Creating an arrow or speech-bubble shape in pure CSS
- Prototyping a custom polygon crop before hand-coding it

## How to use it

1. **Pick a shape or preset** — Choose polygon (with a preset), circle, ellipse, or inset.
2. **Shape it** — Drag polygon vertices, or adjust the sliders for circle/ellipse/inset.
3. **Copy the CSS** — Copy the clip-path declaration into your stylesheet.

## When to use it, and when to use something else

- **vs Clippy (bennettfeely.com/clippy)** — use Clip Path Generator when you want the visual editor bundled with your other CSS tools and no third-party page. Use Clippy (bennettfeely.com/clippy) when you specifically want its exact preset gallery.
- **vs An SVG clipPath element** — use Clip Path Generator when a CSS basic shape (polygon/circle/ellipse/inset) is enough and you want it inline in CSS. Use An SVG clipPath element when you need curved/bezier clip edges, which CSS basic shapes can't express.

## Frequently asked questions

### What is clip-path used for?

clip-path crops an element to a shape — a polygon, circle, ellipse, or inset rectangle — hiding everything outside it. It's a CSS-only way to make angled section edges, custom avatar frames, arrows, and speech bubbles without editing the image.

### Why does the output use percentages?

Percentage coordinates are relative to the element's box, so the same clip-path scales correctly whether the element is 100px or 800px wide. Pixel coordinates would break on resize.

### Do all browsers support clip-path?

Yes — the basic shapes (polygon, circle, ellipse, inset) are supported in every modern browser. Very old browsers may need the -webkit- prefix on some values.

### Can I edit a polygon after picking a preset?

Yes — drag any vertex to move it, use Add vertex to insert one, or double-click a vertex to remove it (minimum three).

## Related tools

- https://offlineutils.com/border-radius-generator
- https://offlineutils.com/css-gradient-generator
- https://offlineutils.com/glassmorphism-generator