Drag the points on the photo to cut it into any shape, or start from one of 36 ready-made shapes: triangles, hexagons, stars, chevrons, message bubbles, slanted section edges and notched cards. Switch to circle, ellipse or inset for rounded cuts, preview a smooth morph between two shapes, and copy the result as CSS, a Tailwind class or keyframes, in percent or pixels.
clip-path hides every part of an element that falls outside a shape you describe. Nothing is resized or moved: the element keeps its full box in the layout, and only the visible area changes. That is why a clipped image still pushes the content below it down by its full height, and why clicks outside the shape pass through to whatever is behind.
The four basic shapes cover most needs. polygon() takes a list of x and y points; circle() takes a radius and a centre; ellipse() takes two radii and a centre; inset() trims a distance from each side and can round the corners with the round keyword. Points are measured from the top left of the element, so 0% 0% is the top left corner and 100% 100% is the bottom right.
Slanted and V-shaped section edges are the most common use: a hero or a feature band with an angled bottom gives a page direction without any extra images. Apply the clip to the section, then pull the next section up with a negative margin equal to the slant so no gap shows.
Notched and cut-corner cards suit tech, gaming and industrial brands, and a ticket stub shape works for events and coupons. Hexagons and circles are popular for team photos and logo grids. Chevrons and arrow tags make step indicators and breadcrumb trails. Message bubbles help testimonial blocks feel like a conversation.
clip-path can be transitioned and animated like any other property, as long as the start and end shapes are compatible. Two circles, two ellipses or two insets always animate. Two polygons animate only when they have exactly the same number of points; otherwise the browser snaps from one to the other.
The Animate panel matches the point counts for you and previews the result on the photo. Hover reveals are a good fit: set the resting shape on the element and the second shape on :hover with a short transition. The exported keyframes include a prefers-reduced-motion rule that turns the loop off for visitors who ask for less motion.
Yes, with no signup. It runs entirely in your browser. If you load your own image it is shown from your device and never uploaded.
The basic shapes used here (polygon, circle, ellipse and inset) work unprefixed in current Chrome, Edge, Firefox and Safari. Very old Safari versions needed -webkit-clip-path; add that line too if you must support them.
Browsers only animate between two polygons that have the same number of points, or two shapes of the same kind. This tool fixes that for you: when the shapes differ it adds extra points along the longest edges so both polygons match, and the exported keyframes already include those points.
Tailwind has no built-in clip-path utility, so the tool gives you an arbitrary property class such as [clip-path:polygon(50%_0%,100%_100%,0%_100%)]. Tailwind turns the underscores back into spaces. It works in Tailwind 3.4 and later, including version 4. Paste it into the element's class list as it is.
Percent values are measured against the element's own box, so the shape stretches with it. The pixel version converts each point using the width and height you enter, which keeps exact sizes but will not adapt if the element resizes.
Yes, with a single polygon that walks around the outside, cuts in to an inner edge, and comes back out along the same line. The Frame preset shows the pattern. Newer browsers also support path() and shape(), which this tool does not generate.
Related: CSS shadow generator, CSS layout generator, Color palette generator, Image color picker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.