Home › Developer Tools › CSS Clip-Path Generator

CSS Clip-Path Generator

Choose a shape, drag the handles on the image and copy ready-to-use clip-path CSS. Add or remove polygon points, type exact coordinates, and preview on your own picture without uploading it.

Shape

Drag the handles. Double-click an edge to add a point; select a point and press Delete to remove it.

Snap to 5% grid Show grid Show clipped-off area

Preview size

Image

Fill color

Your image never leaves your device.

Generated CSS

Add -webkit- line

How to use the CSS Clip-Path Generator

Pick a shape from the presets, for example Hexagon, Star, Circle or Inset.
Drag the handles on the preview. For polygons, double-click an edge to add a point, select a point and press Delete to remove it.
Fine-tune with the coordinate table or arrow keys (hold Shift for 5% steps); turn on Snap for tidy round numbers.
Try your own image with Use my image, or change the preview background color.
Press Copy CSS and paste the clip-path declaration into your stylesheet.

clip-path shape functions

Function	Syntax	Notes
`polygon()`	`polygon(x1 y1, x2 y2, x3 y3, …)`	Three or more points, joined in order and closed automatically. Percentages are relative to the element's width (x) and height (y).
`circle()`	`circle(radius at cx cy)`	A percentage radius is relative to √(width² + height²) / √2. Keywords `closest-side` and `farthest-side` also work.
`ellipse()`	`ellipse(rx ry at cx cy)`	`rx` is relative to the width and `ry` to the height.
`inset()`	`inset(top right bottom left round radius)`	Uses the same 1 to 4 value shorthand as `margin`; `round` takes `border-radius` values.

Example: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); cuts any element into a flat-sided hexagon that scales with it.

Tips for using clip-path

Animate between shapes: polygons with the same number of points transition smoothly, e.g. transition: clip-path .4s ease plus a different polygon on :hover. Add points to the simpler shape (double-click an edge) so both have equal counts.
Shadows: a clipped element's own box-shadow is cut off. Put the element in a wrapper and use filter: drop-shadow() on the wrapper; build the filter with the CSS Filter Generator.
Images: combine clip-path with object-fit: cover so photos fill the shape without stretching.
Clicks follow the shape: only the visible area receives pointer events, which is handy for non-rectangular buttons.
Simple corners only? For rounded rectangles border-radius is lighter and keeps borders and shadows intact; try the CSS Border Radius Generator.

Frequently asked questions

What does CSS clip-path do?

clip-path hides every part of an element outside a shape you define. The element keeps its normal size in the layout, but only the area inside the shape is painted and only that area responds to clicks and hovers.

Which shapes can clip-path use?

The basic shape functions are polygon(), circle(), ellipse() and inset(). You can also reference an SVG <clipPath> with url(#id), and newer browsers support path() and xywh(). This generator outputs the four basic shapes, which work in every modern browser.

How are the percentages in polygon() measured?

Each point is an x y pair. Percent values are relative to the element's reference box (the border box by default): 0% 0% is the top-left corner and 100% 100% the bottom-right. Because they are relative, the shape scales with the element.

What does a percentage radius in circle() mean?

In circle(50% at 50% 50%) the radius percentage is measured against the element's diagonal divided by the square root of 2, so on a square element 50% touches all four sides. On a rectangle it is not the same as 50% of the width; use ellipse() if you want width- and height-based radii.

Can I animate clip-path?

Yes. clip-path transitions and animates smoothly between two shapes of the same type, and for polygon() both shapes must have the same number of points. Add transition: clip-path .4s ease and change the shape on :hover.

Do I still need -webkit-clip-path?

Unprefixed clip-path with basic shapes works in all current versions of Chrome, Edge, Firefox and Safari (Safari since 13.1). The -webkit- line only helps very old Safari and iOS versions, so it is off by default.

Does clip-path work with box-shadow or borders?

The shadow and border are clipped too, because they are part of the element. To get a shadow that follows the shape, wrap the clipped element and use filter: drop-shadow() on the wrapper.

Related tools