BYTETOOLS

CSS Clip Path Generator

Online clip-path generator and editor: triangles, arrows, hexagons, circles, ellipses and custom polygons with point sliders. Live preview and copy-ready CSS.

Polygon points (3) — editing switches to Custom

P1
50
0
P2
0
100
P3
100
100

CSS

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

What is the CSS Clip Path Generator?

The CSS Clip Path Generator creates clip-path shapes without hand-writing coordinates. Choose from ready-made shapes — triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, arrow, circle and ellipse — or build a custom polygon by dragging X/Y sliders for each point.

  • 9 preset shapes plus custom polygons
  • Per-point X/Y sliders with add/remove
  • Circle and ellipse basic shapes
  • Percentage coordinates scale to any element
  • Live clipped preview
  • Copy-ready clip-path CSS

How to use the CSS Clip Path Generator

  1. 1

    Pick a shape from the dropdown, or choose Custom polygon.

  2. 2

    For custom polygons, drag the X and Y sliders for each point; add or remove points as needed.

  3. 3

    Watch the live preview clip in real time.

  4. 4

    Click Copy CSS to grab the clip-path declaration.

About the CSS Clip Path Generator

The CSS Clip Path Generator creates clip-path shapes without hand-writing coordinates. Choose from ready-made shapes — triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, arrow, circle and ellipse — or build a custom polygon by dragging X/Y sliders for each point.

The preview clips a colorful demo panel live, so you see exactly how the shape will cut your element. The generated clip-path declaration uses percentage coordinates, meaning the shape scales with any element size. Copy the CSS with one click.

As with all ByteTools, generation happens entirely in your browser — free, private and offline-capable.

Frequently asked questions

What is clip-path in CSS?

clip-path defines a visible region for an element — everything outside the shape is hidden. It accepts basic shapes like polygon(), circle() and ellipse(), and is widely used for angled section dividers, hexagon avatars and decorative image masks.

How do polygon() coordinates work?

polygon() takes a list of x y pairs that trace the shape's outline in order. Percentages are relative to the element's box: 0% 0% is the top-left corner and 100% 100% the bottom-right. A triangle pointing up is polygon(50% 0%, 0% 100%, 100% 100%).

Does clip-path work in all browsers?

Basic shapes (polygon, circle, ellipse, inset) work unprefixed in all modern browsers. Older Safari versions needed the -webkit-clip-path prefix, so adding both lines is a harmless belt-and-braces move for maximum compatibility.

What is the difference between clip-path and mask?

clip-path cuts with a hard-edged vector shape — a pixel is either visible or hidden. mask uses an image or gradient where transparency creates soft, partial visibility. Use clip-path for crisp geometric shapes and mask for feathered or textured fades.

Can I animate a clip-path?

Yes — clip-path is animatable with CSS transitions and keyframes as long as both shapes have the same type and number of points. Morphing a polygon requires the start and end polygons to have equal point counts, so plan your shapes accordingly.

Is content outside the clip-path still clickable?

No. Clipped areas are removed from hit-testing, so clicks pass through to whatever is underneath. That makes clip-path handy for creating non-rectangular interactive areas like hexagonal buttons.

Can I use clip-path to crop an image?

Yes. Apply the generated clip-path to any <img> and the browser masks the photo to your shape — hexagon avatars and angled photo edges are common uses. Because the coordinates are percentages, the crop scales with the image and stays crisp at any size.

Guides for CSS Clip Path Generator

Related tools