consolelog.tools

CSS Clip Path Generator

Draw clip-path shapes by dragging vertices on a live canvas — polygon, circle, ellipse, and inset — with 25 ready-made shapes, per-point editing, and a draggable editor. Export CSS (with -webkit-), SCSS, Tailwind, or JS.

About this ToolHow it works, benefits & use cases

Sculpt CSS clip-path shapes by dragging directly on a live canvas. Choose one of four shape types — polygon, circle, ellipse, or inset — and edit it visually: drag polygon vertices to move them, click empty canvas space to drop a new vertex on the nearest edge, or hover an edge and hit the + button to insert a midpoint. Circles and ellipses get draggable centre and radius handles; inset is shaped with top/right/bottom/left sliders plus a corner-radius. Every coordinate is a percentage, so the shape scales with the element. A gallery of 25 ready-made shapes — arrows, stars, chevrons, badges, speech bubbles, and more — gives you instant starting points, and any parametric shape can be converted into an editable polygon when you want full per-point control. The preview shows the clipped element over your choice of gradient background with a ghost of what’s clipped away, and a live readout shows the exact clip-path value. Export CSS (with the -webkit-clip-path prefix for Safari), SCSS, a Tailwind arbitrary class (identical in v3 and v4), or a JS inline style — all captured in a shareable URL.

How to Use

  1. 1Pick a shape type — polygon, circle, ellipse, or inset — or load one of the 25 gallery shapes.
  2. 2For polygons, drag the vertices, click empty canvas to drop a new point, or use the + button on an edge to insert one.
  3. 3For circle/ellipse, drag the centre and radius handles; for inset, use the top/right/bottom/left and corner-radius sliders.
  4. 4Fine-tune any polygon vertex with the numeric X/Y fields, or use "Start from scratch" to begin with a fresh triangle.
  5. 5Switch the preview background, and click "Convert to editable polygon" to turn a parametric shape into draggable points.
  6. 6Choose an output format and copy, download, share, or pipe the generated clip-path.

Key Benefits

  • Drag vertices and handles directly on a live canvas — no guessing at coordinates
  • Four shape types: polygon, circle, ellipse, and inset (with corner radius)
  • Click-to-add and edge + buttons insert polygon points on the nearest edge
  • 25 ready-made shapes (arrows, stars, chevrons, badges, bubbles) as starting points
  • Percentage-based coordinates so shapes scale with the element
  • Convert any parametric shape into an editable polygon for full control
  • Exports include the -webkit- prefix; Tailwind arbitrary class works in v3 and v4

Common Use Cases

  • Cutting hero images into angled or chevron sections for landing pages
  • Masking avatars and thumbnails into circles, hexagons, or custom shapes
  • Creating arrow, badge, and speech-bubble shapes without SVG
  • Designing diagonal section dividers with inset and polygon clips
  • Producing reusable, responsive clip-path values that scale with their container

Drag dots to move • click empty space to drop a new vertex

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

Shape type

Shapes

Vertices (6)

Copy, download, share, or pipe to another tool

.element {
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Draw any shape, get clean CSS

Drag the vertices to sculpt a polygon(), or switch to circle(), ellipse(), or inset(). Click the + on an edge to add a point; every value is a percentage so the shape scales with the element. Export ships the -webkit-clip-path prefix for Safari, and the Tailwind arbitrary value works the same in v3 and v4.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools