ClipPath Studio

Visual editor for CSS clip-path polygons

Tip: Click and drag points to modify the shape. In Path mode: shift-click to add a point; use "Toggle Curve" to add/remove bezier handles for selected point.

Generated Code

CSS

.clipped {
  background: #3b82f6;
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
}

SVG

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="10,10 90,10 90,90 10,90" fill="#3b82f6" fill-opacity="0.3" stroke="#3b82f6" />
</svg>

Tailwind

/* background: #3b82f6 */
[clip-path:polygon(10%_10%,90%_10%,90%_90%,10%_90%)]