Open menu

CSS Clip-path Generator

Cut images and elements into shapes with clip-path. Drag polygon points over a preview image, add and remove points, or switch to circle, ellipse and inset shapes with rounded corners. Start from 36 presets, including triangles, hexagons, stars, arrows, chevrons, speech bubbles, frames and cut corners, then copy CSS (with the -webkit- prefix), SCSS or Tailwind.

Preset gallery

Accessibility checks

  • Pass This polygon has 5 points. To animate between two clip-paths, both must have the same number of points.
  • Check clip-path hides content outside the shape but keeps its layout space and click area. Keep text away from cut edges.
  • Pass clip-path is supported in all current browsers; the export adds the -webkit- prefix for older Safari.

Export code

.clipped {
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
Favourites on this device (0)

No favourites yet.

Shape
Shape type
Polygon points

Drag the points, or select one and use the arrow keys. New points go between the selected point and the next.

Preview fill

How to use the clip-path generator

  1. Choose a shape type: polygon, circle, ellipse or inset.
  2. For polygons, drag the points on the image, or select one and use the arrow keys (Shift moves 10%). Add point after selected inserts a point halfway to the next one; you can remove points down to three.
  3. For circles and ellipses, set the radius and drag the center.
  4. For inset, set how far each side moves in and round the corners.
  5. Preview on a photo or a gradient, then copy the code.

Ideas

  • Hexagon or octagon avatars for team pages.
  • Slanted section edges using Slant bottom on full-width banners.
  • Arrow and chevron shapes for step indicators.
  • Reveal animations: transition from a small circle to a full one on hover.
  • Ticket and tag shapes for pricing and labels.

Browser support

clip-path with basic shapes works in all current browsers. The export also includes -webkit-clip-path for older Safari versions. Clipped elements keep their full box for layout, so leave enough spacing around them.

How it works

clip-path draws a shape over the element and hides everything outside it. The polygon() function takes a list of points, each written as x and y percentages of the element’s width and height, so the shape scales with the element. circle(), ellipse() and inset() describe simpler shapes with a radius or edge offsets. The generator keeps your points in order as you drag, add or remove them, and writes the matching polygon() value.

Worked examples

Example 1: hexagon team photos

Load Hexagon and switch the fill to Photo to preview it on an image. Apply the exported CSS to each square team photo. Because the points are percentages, the shape scales with any photo size. Add a little extra spacing between items, because clipped elements keep their full rectangular box.

Example 2: a slanted hero section

Load Slant bottom and apply it to a full-width hero banner. The bottom edge drops from 100% on the left to 80% on the right, giving the page a dynamic edge. Increase the slant by dragging the bottom-right point up, or use the arrow keys for precise control.

Example 3: a hover reveal

Use a Circle small (35% radius) as the resting state and Circle (50%) as the hover state, with transition: clip-path 0.4s. Both use the circle function, so the browser animates smoothly between them. Keep the motion short, and add a reduced-motion rule if the effect is large.

Common mistakes

  • Mismatched point counts: polygons only animate when both have the same number of points.
  • Clipping focus rings: clipped elements also clip their outlines, so add a focus style on a parent.
  • Hiding essential content: clipped areas are still in the layout but invisible.

Frequently asked questions

Does clip-path change the layout?

No. The element keeps its full size in the layout, and content outside the shape is simply hidden. The clickable area also follows the visible shape, so parts that are cut away can't be clicked.

Can I animate between two clip-path shapes?

Yes, if both are the same shape function with the same number of points, for example two polygons with six points each. The browser then interpolates each point. The point-count note helps you match shapes.

Why are the coordinates percentages?

Percentages are relative to the element's own box, so the shape scales with the element at any size. 0% 0% is the top-left corner and 100% 100% is the bottom-right.

Should text go inside clipped shapes?

Be careful: clip-path doesn't make text flow around or inside the shape, so text near a cut edge gets chopped off. Add padding, or use shape-outside on a floated element if you want text to wrap around a shape.

What's the difference between clip-path and mask?

clip-path cuts a hard-edged shape out of an element. mask uses an image or gradient, so it can also create soft, partly transparent edges.

Sources