CSS Clip-Path Generator

Visually generate clip-path CSS values with draggable handles and live preview

123
Points (3)
1
X Y
2
X Y
3
X Y
Live Preview
#6366f1
Preset Shapes
CSS Output 
clip-path: polygon(50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0%);
-webkit-clip-path: polygon(50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0%);

About the CSS Clip-Path Generator

The CSS Clip-Path Generator lets you create custom clip-path shapes visually using an interactive SVG canvas with draggable handles — no manual coordinate editing required. It supports all four CSS clip-path shape functions: polygon, circle, ellipse, and inset.

The generated CSS includes both the standard clip-path property and the -webkit-clip-path vendor prefix for maximum browser compatibility. Nine preset polygon shapes — Triangle, Arrow, Star, Hexagon, Pentagon, Diamond, Chevron, Parallelogram, and Trapezoid — provide instant starting points for common design patterns.

How to Generate a CSS Clip-Path Online

  1. Select a shape type — Polygon, Circle, Ellipse, or Inset — using the tabs above the canvas.
  2. For Polygon: drag the numbered handles on the canvas to reshape the polygon, or click + Add Point to increase the number of vertices.
  3. For Circle: drag the center handle to reposition, and use the Radius slider to resize.
  4. For Ellipse: adjust Radius X and Radius Y sliders independently, and drag the center handle to move the focal point.
  5. For Inset: use the Top, Right, Bottom, and Left sliders to define margins, and add a Border Radius for rounded corners.
  6. Click a Preset Shape to instantly load a ready-made polygon (triangle, star, hexagon, etc.).
  7. Use Flip H and Flip V to mirror the shape horizontally or vertically.
  8. Toggle the Grid overlay for precise point alignment.
  9. Switch the Live Preview between colour, checker (transparency), and image backgrounds to see how the clip works in context.
  10. Click Copy to copy the ready-to-paste CSS rule to your clipboard.

Common Use Cases for CSS Clip-Path

  • Diagonal section dividers — Use a polygon clip on a full-width section to create an angled bottom edge that flows into the next content block.
  • Custom image shapes — Clip a photo into a hexagon, diamond, or pentagon for profile cards, team grids, and portfolio layouts.
  • Animated shape transitions — Animate clip-path between two polygon shapes with the same number of points for smooth CSS morphing effects.
  • Reveal animations — Start an element with a fully collapsed inset clip and animate to inset(0%) to create a wipe-in entrance effect.
  • Badge and label shapes — Create arrow, chevron, or star shapes for notification badges and pricing labels without SVG or image assets.
  • Decorative hero backgrounds — Clip a gradient or image layer to an irregular polygon to add visual interest to page headers.
  • Tooltip and callout shapes — Use a polygon with a notch to create a chat bubble or callout arrow purely in CSS.

Frequently Asked Questions

What is CSS clip-path?

The clip-path CSS property defines a clipping region for an element — only the parts of the element inside the clip shape are visible, and everything outside is hidden. It replaces older techniques like SVG masks and PNG transparency for many common shape-clipping needs.

What are the four clip-path shape types?

polygon() defines a custom shape using any number of X/Y coordinate pairs. circle() clips to a circle with a given radius and centre. ellipse() clips to an ellipse with independent X and Y radii. inset() clips to a rectangle inset from the element's edges, with optional rounded corners.

Can I animate clip-path in CSS?

Yes, but only between shapes of the same type and with the same number of points. For example, you can transition between two polygon() values with the same vertex count using CSS transition or @keyframes. The browser interpolates each coordinate pair smoothly.

Does clip-path affect the element's layout space?

No. Like overflow: hidden, clip-path only affects what is visually rendered — it does not change the element's box size or position in the document flow. Surrounding elements still behave as if the full element is present.

Why does the output include -webkit-clip-path?

Older versions of Safari required the -webkit- prefix for clip-path. Including both the prefixed and unprefixed versions ensures your shape works correctly across all browsers, including older iOS Safari releases still in active use.

What coordinate system does clip-path use?

Coordinates are expressed as percentages of the element's own dimensions. 0% 0% is the top-left corner and 100% 100% is the bottom-right. This makes shapes scale automatically with the element, whether it is 100px wide or 1000px wide.

How do I create a diagonal section divider with clip-path?

Use the Polygon shape and set four points: 0% 0%, 100% 0%, 100% 85%, 0% 100% (or similar). This crops the bottom of the section at an angle. Adjust the bottom-right Y value to control the steepness of the diagonal cut.