Is My Input Uploaded?

No. Input is processed locally in this browser tab; these workspaces do not upload your content or save it automatically.

Can I Save The Result?

Copy the output, download its text/code file or save a PDF report. PDF text is rendered with your browser's fonts; retain the text/code export for editable content.

CSS Clip-Path Shape Studio

Build production-ready polygon, inset, circle and ellipse masks with visual editing, transforms, live imagery and reusable project files.

Shape Drafting Controls

Shape Type

Preview Ratio

Polygon Preset

Snap Grid (%): 1

Point X (%): 25

Point Y (%): 0

Gradient Start

Gradient End

Gradient Angle (°): 135

Show Grid Include WebKit Prefix

Live Shape Canvas

.clipped-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%);
}

/* Optional text wrapping */
.floated-shape {
  shape-outside: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Arrow keys move a focused polygon point; Shift moves five percentage points. CSS clipping changes paint, not layout or hit testing. Crossing edges can create cutouts, and shape-outside only affects floated elements.

Loading Tool…

What Is the CSS Clip-Path Shape Studio?

Build production-ready polygon, inset, circle and ellipse masks with visual editing, transforms, live imagery and reusable project files.

How It Works

Start with one of 14 polygon presets or choose a circle, ellipse or rounded inset. Drag numbered vertices, use keyboard arrows for precision, insert or remove points, snap to a grid, flip, rotate, reverse or generate an organic shape. Preview against a gradient or local image at six aspect ratios, tune inset corners and ellipse centers, undo changes, then copy prefixed CSS or save the editable project as JSON.

When to Use It

Preparing reusable development and design assets locally, with explicit inputs and downloadable results.

Frequently Asked Questions

Is My Input Uploaded?: No. Input is processed locally in this browser tab; these workspaces do not upload your content or save it automatically.
Can I Save The Result?: Copy the output, download its text/code file or save a PDF report. PDF text is rendered with your browser's fonts; retain the text/code export for editable content.

Found an issue? Send Feedback. See our data sources and update policy for tools that depend on changing information.