CSS clip-path Visual Editor with SVG Export

✂️ Visual CSS Shaping

CSS Clip-Path Visual Editor

Drag points, shape your design, and export clean CSS or SVG code. No guessing, no trial-and-error.

Live Preview

Click to add point · Drag to move · Double-click to delete

Points (0)

What Is CSS Clip-Path?

The clip-path CSS property defines a clipping region that controls which part of an element is visible. Everything inside the region shows; everything outside is hidden. Unlike border-radius which only rounds corners, clip-path lets you create any polygonal shape — triangles, stars, arrows, chevrons, and completely custom silhouettes.

How to Use This Editor

  • Add points: Click anywhere on the canvas to place a new vertex. Points are added in clockwise order.
  • Move points: Drag any point to reposition it. Coordinates update in real time as percentages (0–100%), making the shape fully responsive.
  • Delete points: Double-click a point on the canvas, or click the ✕ button next to it in the points list.
  • Start from a preset: Choose a shape from the dropdown to load a starting template, then customize it by dragging points.

CSS vs SVG Export

The CSS tab generates a clip-path: polygon(...) declaration that you can paste directly into your stylesheet. This works on any HTML element (images, divs, buttons) and has excellent browser support.

The SVG tab generates a standalone <svg> element with a <clipPath> definition. Use this when you need more complex paths, want to reference the clip via url(#id), or need compatibility with older SVG rendering contexts.

Tips for Responsive Shapes

All coordinates in this tool use percentage units (not pixels). This means your clip-path scales perfectly with the container regardless of screen size. A triangle defined as 50% 0%, 100% 100%, 0% 100% will always be a centered triangle whether the element is 100px or 1000px wide.