CSS clip-path Shape Generator

Generate complex CSS clip-path polygons, circles, and ellipses visually with draggable anchor points.

100% In-Browser Privacy|Zero Telemetry
3 Points
Interactive Canvas
1
50%, 0%
2
3
Snap:
Transform Tools:
Preview Canvas Background:Pure visual styling

Generated Code

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Paste your custom rule

Point Coordinates

3 vertices
#1
X:%
Y:%
#2
X:%
Y:%
#3
X:%
Y:%

Curated Shape Presets Library

Click any preset to instantly apply its anchor points and CSS definition.

Complete Guide to CSS clip-path & Shape Generation

Everything you need to know about CSS clip paths, hardware-accelerated clipping, animation transitions, and cross-browser integration.

What is CSS clip-path?

The CSS clip-path property creates a clipping region that sets what part of an element is visible. Everything inside the region is rendered, while content outside is completely masked out and made transparent.

Unlike older CSS techniques involving overflow: hidden or SVG image masks, modern CSS clip-path runs directly on the GPU compositor thread, making it ultra-smooth and virtually zero-cost for layout recalculations.

Hardware Acceleration & Hit Testing

When you clip an element with clip-path, browser pointer events (such as clicks, hover, and touches) only fire inside the visible polygon bounds! The clipped-out parts do not block interaction with elements underneath.

This makes clip-path ideal for diagonal hero sections, slanted interface cards, hexagonal gaming dashboards, and interactive badges.

The Golden Rule of Polygon Animations

You can smoothly animate CSS clip paths with transition: clip-path 0.5s ease or CSS keyframe animations.

Important Rule: To interpolate between two polygons smoothly, both shapes MUST contain the exact same number of vertex coordinates. If one shape has 4 points and another has 5, the browser cannot interpolate them and will jump abruptly without transition.

Fixing the Missing Box-Shadow Issue

Standard CSS box-shadow follows the rectangular element box, so applying a clip-path cuts off the shadow!

To create a shadow that accurately hugs the contour of your clipped polygon, wrap the element in a parent container and apply CSS filter: drop-shadow(...):

.parent-wrapper {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
}
.parent-wrapper > .clipped-child {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Frequently Asked Questions

How do I make CSS clip-path responsive?

By default, using percentage coordinates (e.g. 50% 0%) scales proportionally with the element width and height. For exact vector scaling regardless of aspect ratio, you can also embed an SVG clipPath with clipPathUnits="objectBoundingBox".

How do I use this in Tailwind CSS v3 or v4?

Tailwind supports arbitrary properties! Copy our Tailwind export, which converts spaces into underscores: [clip-path:polygon(50%_0%,0%_100%,100%_100%)] and paste it directly into your HTML/JSX className.

Is -webkit-clip-path still necessary?

While modern Chrome, Edge, and Firefox support the un-prefixed clip-path, older versions of iOS Safari and WebKit require -webkit-clip-path. We recommend using our Cross-Browser export format for maximum compatibility.

Is my data private when using this generator?

Yes, 100%. All vector math, coordinate mapping, and CSS generation run exclusively in your browser memory using client-side JavaScript. No coordinates, images, or telemetry are ever transmitted to any remote servers.