Skip to content
T
Tools.Town
Free Online Tools for Everyone
CSS Clip-Path Generator illustration

CSS Clip-Path Generator

100% Free

Visually craft CSS clip-path shapes — polygon, circle, ellipse and inset — with editable anchor points, ready-made presets, a live preview, and copy-ready CSS.

Shape Presets
Live Preview
100% Client-Side
No Sign Up
Shape
Presets
Points (3)
1
2
3
Live preview
CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Embed This Tool

Easy to Embed

Add CSS Clip-Path Generator to your website or blog in seconds.

  • Responsive design
  • Lightweight & fast
  • No backend required
  • Always up-to-date 
<iframe
  src="https://tools.town/embed/css-clip-path-generator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="CSS Clip-Path Generator">
</iframe>

Share This Tool

Share Instantly

Share CSS Clip-Path Generator with anyone — no login required.

  • Shareable link
  • No login required
  • Works on any device
  • No account needed

Share via

Advertisement

How to Use

  1. 1 Choose a shape type: polygon, circle, ellipse, or inset
  2. 2 For polygons, start from a preset (triangle, hexagon, star, arrow) or add your own points
  3. 3 Drag the sliders or edit the X/Y percentages to reshape the clip
  4. 4 Watch the live preview clip a sample element in real time
  5. 5 Copy the clip-path CSS and paste it into your stylesheet

Features

  • Four clip-path types: polygon, circle, ellipse, and inset
  • Built-in polygon presets including triangle, hexagon, star, and arrow
  • Add, edit, and remove polygon anchor points (3–12)
  • Sliders for circle/ellipse radius and centre, and inset edges plus corner radius
  • Live preview over a checkerboard so transparency is visible
  • Runs entirely in your browser — nothing is uploaded

Why it Matters

clip-path lets you cut elements into non-rectangular shapes — angled section dividers, hexagon avatars, arrow callouts — without exporting a single image or SVG mask. Writing the coordinate lists by hand is tedious and easy to get wrong, so generating them from a live preview keeps your markup lean and your shapes pixel-accurate.

★★★★★

Use Cases

Section Dividers

Slice hero sections with angled or sloped edges using inset and polygon

Avatar Shapes

Clip profile photos into hexagons, circles, or custom polygons

Decorative Callouts

Build arrows, badges, and speech-bubble shapes with pure CSS

Learning clip-path

See how polygon, circle, ellipse, and inset coordinates map to a shape

What this tool does

The CSS Clip-Path Generator lets you draw a clipping shape and copies the exact clip-path value you need. Switch between polygon, circle, ellipse, and inset; start from a preset or fine-tune individual points; and watch a sample element get clipped live over a checkerboard so you can see precisely where the edges fall.

How it works

Each shape type maps to a CSS basic-shape function. Polygons become polygon(x% y%, …), circles and ellipses become circle()/ellipse(… at …), and inset crops become inset(top right bottom left round radius). All values are percentages of the element box, so the result stays responsive. The pure buildClipPath function assembles the string deterministically.

Privacy

Everything runs locally in your browser. Nothing you create is uploaded or stored.

Frequently Asked Questions

What units does clip-path use here?
All coordinates and radii are percentages of the element's box. 0% is the left or top edge, 100% is the right or bottom edge, and 50% is the centre. Percentages keep the shape responsive — it scales with the element rather than being locked to pixels.
What's the difference between inset and polygon?
inset() crops a rectangle inward from each edge and can round the corners, so it's perfect for simple rectangular clips. polygon() draws an arbitrary many-sided shape from a list of points, which is what you need for triangles, stars, arrows, and angled dividers.
Does clip-path actually remove the clipped area?
Visually, yes — anything outside the shape isn't painted and won't capture pointer events by default. The element still occupies its full box in layout, though, so surrounding content flows around the original rectangle, not the clipped shape.
Is clip-path well supported in browsers?
Basic shapes (polygon, circle, ellipse, inset) are supported across all modern browsers. For older browsers you may want a fallback style, since an unsupported clip-path simply shows the un-clipped element.
Is anything uploaded?
No. The generator runs entirely in your browser; your shapes and any uploaded preview image never leave your device.
📖

Want to understand the math?

Browse all guides →
CSS clip-path Explained
css

CSS clip-path Explained: Polygon, Circle, Ellipse, and Inset

A complete guide to the CSS clip-path property — the four basic shapes, how percentage coordinates work, when to use polygon versus inset, browser support, and how to build shapes visually.

23 Jun 2026

5 min read

Related Tools You Might Like

CSS Filter Generator

Visually compose CSS filters — blur, brightness, contrast, grayscale, saturate, sepia, invert, hue-rotate and opacity — on a live image preview, then copy clean CSS.

Border Radius Generator

Visually craft CSS border-radius with per-corner sliders, live preview, unit toggle (px/em/rem/%), and shorthand collapsing.

CSS Gradient Generator

Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.

CSS Transform Generator

Compose CSS transforms — translate, scale, rotate and skew — with live sliders, a real-time preview, and clean copy-ready CSS that collapses equal scales automatically.

CSS Animation Generator

Build CSS @keyframes animations from ready-made presets, tune duration, easing, delay, iteration, direction and fill mode, and copy production-ready CSS with a live preview.

Browse more free tools
More Design Tools All categories