Dev Tools
Client-sidefiles never upload

CSS clip-path Editor

Visually edit CSS `clip-path`: **polygon** (drag points, double-click to remove, right-click on a point to insert after it), **circle**, **ellipse**, **inset** (with rounded corners). 9 presets (triangle / rhombus / hexagon / star / arrow…). Export to CSS, Tailwind v4 bracket class, SVG path.

Preset
Editor (drag / double-click delete / right-click add)
6 points (right-click after a point to add; double-click to remove)
Vertices (%)
#0
#1
#2
#3
#4
#5
Applied to a sample image
›How to use
  1. Pick a preset above (triangle, rhombus, hexagon, star, arrow, parallelogram, circle, ellipse, inset).
  2. Polygon mode: drag points to reshape · double-click to delete a point · right-click to insert a new one after it.
  3. Circle / Ellipse / Inset modes: sliders on the right control center, radii, side insets, corner radius.
  4. Bottom-right preview shows the clip applied to a real-looking image (clip-path always looks better on solid colour than on photos — preview both).
Tips
  • Polygon needs ≥ 3 points — the delete button is disabled at the floor.
  • Tailwind v4 bracket class converts spaces to \_ so the class is valid; paste directly into
    .
  • SVG path is ideal for an SVG element or as a mask — drop inside SVG defs.
  • vs bennettfeely.com/clippy — Clippy is the classic but 10+ years untouched; we add Tailwind v4 bracket classes and SVG path output.

💡 clip-path is supported in Safari / Chrome / Firefox. Old Edge needs -webkit- prefix; IE is EOL and never supported it.

Related tools