Skip to main content

CSS Clip-Path Generator

Build CSS clip-path shapes by dragging polygon points or adjusting circle, ellipse, and inset sliders, then copy the CSS.

Runs 100% in your browser

Shortcuts
Copy the output
Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

12345
clip-path: polygon(50% 0%, 97% 35%, 79% 91%, 21% 91%, 3% 35%);

Presets

Points (5)

Usage: apply to any element — images, cards, divs. Pair with overflow: hidden on the parent for clean edges.

How to use the CSS Clip Path Generator

  1. Choose polygon, circle, ellipse, or inset, or start from a preset.

  2. Drag the points or move the sliders until the shape looks right.

  3. Copy the clip-path CSS, or copy a link to share the shape.

Example: Clipping an element to a pentagon

Polygon points
50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%
CSS
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Percentages are relative to the element's own box, so the shape scales with it.

Frequently Asked Questions

What does the CSS clip-path property do?

It hides everything outside a shape you define, so an element can render as a triangle, hexagon, circle, or any polygon without an image mask. The element keeps its box for layout; only what's painted is clipped.

Which clip-path shapes can I use?

polygon() for arbitrary point lists, circle() and ellipse() with a radius and center, and inset() for a rectangle with optional rounded corners. Percentages are relative to the element's own box, so shapes scale with it.

Does clip-path affect clicks and accessibility?

Clipped-away areas stop receiving pointer events, so the visible shape is also the clickable area. The element's content stays in the accessibility tree, so keep text inside the visible region or screen reader users will hear text that sighted users can't see.

Can I animate a clip-path?

Yes, and it's GPU-friendly. Two polygons animate smoothly only if they have the same number of points, so repeat a point rather than dropping one when going from, say, a triangle to a square. Transitions between different shape functions (circle to polygon) don't interpolate.

About the CSS Clip Path Generator

The clip-path CSS property lets you define a visible region for an element — everything outside the path is hidden. This tool gives you a visual editor for all four clip-path shape types, so you never have to hand-write percentage coordinates again.

8 Free Tools for JSON, Color, and CSS Work shows how this editor fits with the easing and keyframe tools.

Shape Types

Polygon

Define any shape with a series of percentage-based x/y coordinates. Drag handles directly on the canvas, or choose from presets like triangle, hexagon, arrow, or star.

clip-path: polygon(50% 0%, 100% 100%, 0% 100%)

Circle

Clip to a circle with adjustable radius and center position. Ideal for avatar images and circular icon crops.

clip-path: circle(50% at 50% 50%)

Ellipse

Like circle but with independent x and y radii. Useful for oval hero section cutouts and curved image crops.

clip-path: ellipse(50% 30% at 50% 50%)

Inset

Clip to a rectangle defined by top/right/bottom/left insets from the element's edges. Add optional border-radius for rounded corners.

clip-path: inset(10% 10% 10% 10% round 5%)

Common Use Cases

  • Hero section diagonal cuts — use polygon to create a diagonal bottom edge on a banner
  • Circular avatars — circle or ellipse clip on profile images without border-radius hacks
  • Decorative shapes — hexagons, stars, and arrows for icon backgrounds and cards
  • Animated reveals — animate clip-path between shapes for creative transitions
  • Text cropping — clip decorative large text to a background image

Browser Support

clip-path is supported in all modern browsers. For animating between two polygon shapes, both must have the same number of points — add extra coincident points to the simpler shape if needed.