Design & CSS

CSS Clip-Path Generator

Five shape modes (polygon / circle / ellipse / inset / path) with pointer-capture draggable handles, grid snap, click-an-edge to insert vertices, 25+ polygon presets, four preview content modes, plus CSS / -webkit / Tailwind arbitrary value / SVG clipPath / HTML demo output and a hover-animation snippet.

Polygon presets

Click a tile to load it. The current vertices are replaced.

Live canvas

Drag handles to reshape. Click an edge to insert a vertex.

Drag any handle. Hold Shift to bypass snapping.
Click an edge of the polygon to insert a new vertex there.

Preview

Preview content

Gradient from

Gradient to

Preview size420px

Frame background

Vertices

Reorder, edit or delete polygon points by hand.

#X %Y %

Transforms

Generated code

Copy whichever format your project needs.

CSS

clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

CSS + prefixes

-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

Tailwind

clip-path-[polygon(30%_0%,_70%_0%,_100%_30%,_100%_70%,_70%_100%,_30%_100%,_0%_70%,_0%_30%)]

SVG <clipPath>

<clipPath id="uxtools-clip" clipPathUnits="objectBoundingBox">
  <polygon points="0.3,0 0.7,0 1,0.3 1,0.7 0.7,1 0.3,1 0,0.7 0,0.3" />
</clipPath>

HTML demo

<style>
  .clipped {
    width: 320px;
    height: 320px;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }
</style>

<div class="clipped"></div>

Hover animation

Animate between two shapes on hover.