Free CSS Clip-Path Builder
Start from a shape or paste a clip-path, see it clip a box, and copy clean CSS or an SVG clipPath.
What is a CSS Clip-Path Builder?
This CSS clip-path builder makes and checks clip-path shapes: polygons, circles, ellipses, insets with rounded corners and paths. Start from a shape such as a hexagon, star or speech bubble, or paste your own, and see it clip a box with the outline drawn on top.
Every value is parsed into numbers and units and written back tidily, so a pasted shape comes out normalised. It resolves each point to pixels on a box you choose, converts the shape to an SVG clipPath, and flags crossing edges, points outside the box and shapes that hide the element.
Key Features
Shape Presets
Thirteen starting shapes, from triangle and hexagon to cross and speech bubble.
Live Clip Preview
The shape clipping a box, outlined so you can see its points.
Clean CSS
Pasted values come back normalised and shortened.
SVG clipPath
The same shape for SVG, in bounding-box units.
Shape Checks
Crossing edges, empty insets and stray points flagged.
Perfect for everyone
- Front-end developers
- Web designers and anyone styling images
- Cards or hero sections
How to Use the CSS Clip-Path Builder
Choose a starting shape or paste a clip-path value, with or without the property name in front. Add width and height lines to match your element, and the preview, pixel points and SVG version all follow, so you can see exactly what will be cut away before the CSS goes anywhere near your page.
Pick or Paste
Start from a preset or paste a clip-path value.
Set the Box
Add width and height lines to match your element.
Check the Outline
The dashed line shows the shape over the clipped box.
Copy the Result
Take the CSS, the SVG clipPath or the points.
Shapes, Clipped
Each row is a clip-path of the kind used on hero images, avatars, cards and badges, along with values that won’t work as written. Each answer is this tool’s CSS, SVG, pixel points or check, worked out on the box given, which is 400 by 300 pixels unless the example sets its own size.
“clip-path: polygon(100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%, 25% 6.7%, 75% 6.7%);”
“clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);”
“width: 120 height: 120 clip-path: circle(60px at 60px 60px);”
“clip-path: polygon(0% 0%, 100% 100%, 100% 0%, 0% 100%, 0% 100%, 120% 50%);”
“-webkit-clip-path: circle(40% at top left);”
“clip-path: inset(10px 20px 10px 20px round 8px);”
“width: 640 height: 360 clip-path: ellipse(farthest-side closest-side at 25% 50%);”
“clip-path: polygon(50% 0%, 61.23% 34.55%, 97.55% 34.55%, 68.16% 55.9%, 79.39% 90.45%, 50% 69.1%, 20.61% 90.45%, 31.84% 55.9%, 2.45% 34.55%, 38.77% 34.55%);”
“clip-path: polygon(0 0, 10 10, 0 10);”
“clip-path: circle(calc(50% - 10px));”
The Five Clip-Path Shapes
Each clip-path shape function takes lengths in px or %, measured against the element’s box. Percentages scale with the element, which is why most shapes in the wild are written in them, while pixels suit fixed details such as a notch of a set size.
polygon()
Any number of x y points, joined in order.
“How many points does a triangle need?”
circle()
A radius and a centre after at.
“What’s the default radius?”
ellipse()
Two radii, horizontal then vertical, and a centre.
“How many radii does ellipse() take?”
inset()
Distances in from each edge, with optional round corners.
“Which shape takes round?”
path()
SVG path data in quotes, in pixels.
“Does path() scale with the element?”
How Lengths Resolve
The same clip-path can mean different shapes on different elements, depending on the units. This is how each value turns into pixels, and the Points view shows the result for your box so there’s no guessing. Set width and height to your element’s real size to see the exact numbers.
x Percentages
Polygon and position x values are a share of the box’s width.
y Percentages
y values are a share of the box’s height.
Circle Radius
A % radius is of the box’s diagonal divided by √2, so it stays round.
Side Keywords
closest-side and farthest-side reach the nearest or furthest edge.
Pixels
px values stay fixed however big the element gets.
The Starting Shapes
The shape list fills in a polygon, circle or inset that you can then adjust point by point. Regular shapes are worked out from equal angles around the centre, so the hexagon, pentagon and octagon are exact rather than eyeballed, and every preset is written in percentages so it fits any box.
Triangle and Rhombus
Three and four points touching the middle of each edge.
Pentagon, Hexagon and Octagon
Regular polygons with their corners on a circle filling the box.
Star
Ten points alternating between the outer edge and an inner ring.
Arrow, Chevron and Cross
Straight-edged signs for steps, links and badges.
Speech Bubble and Rounded Inset
A box with a tail, and a rectangle pulled in with rounded corners.
Clip-Path Tips
Habits that make clip-path shapes easier to maintain and animate, and avoid the surprises that come from clipping away more of the element than you ever meant to. Most of them follow from one fact: clip-path hides pixels, but the element still takes up its full box.
Same Point Count to Animate
Polygons only transition smoothly between shapes with equal points.
Shadows Get Clipped
Use filter: drop-shadow() on a wrapper instead of box-shadow.
Clicks Follow the Shape
Clipped-away areas don’t receive clicks or hover.
Prefer Percentages
Shapes in % stay right when the element resizes.
Layout Is Unchanged
Clipping hides pixels but the element keeps its full size.
Animating Clip-Path
clip-path can be transitioned and animated like other CSS properties, which makes it a light way to reveal images and morph shapes. The browser blends the numbers from one shape to the other, so the two shapes have to be built alike for that blend to work.
Same Shape Type
A circle animates to a circle; a circle to a polygon jumps.
Same Point Count
Polygons need equal points; add duplicates to the simpler one.
Circle Reveals
Grow circle(0%) to circle(75%) to uncover an image from its centre.
Wipe Reveals
Animate inset(0 100% 0 0) to inset(0) for a left-to-right wipe.
Hover Effects
Transition a slanted edge flat on hover for a subtle movement.
CSS Shapes or an SVG clipPath
The same outline can be written as a CSS shape or an SVG clipPath, and the SVG view converts one into the other. Which to use depends on where the shape lives and who maintains it, and both can be referenced from the same stylesheet.
CSS for Simple Shapes
One line, easy to read, and it animates with transitions.
SVG for Reuse
Define a clipPath once and point many elements at it with url().
Bounding-Box Units
The SVG version uses fractions of the element, so it scales like % values.
Curves
Smooth curves need path() in CSS or a path inside the clipPath.
Older Code
Some older SVG-based components expect a clipPath element.
Clip-Path Pitfalls
Values that clip the wrong thing, or nothing at all, and how to spot them before they ship. Browsers ignore an invalid clip-path without complaint, so a typo usually shows up as a plain rectangle rather than an error.
Missing Units
Every non-zero number needs px or %.
Crossing Edges
Points in the wrong order make bow-tie shapes.
Pixel Paths on Fluid Boxes
path() doesn’t scale, so it won’t fit a resized element.
Over-Large Insets
Insets that meet in the middle hide everything.
calc() in Shapes
Fine in browsers but can’t be previewed here; check the final value.
Where Clip-Path Shapes Go
Anywhere a plain rectangle looks too plain and an extra image or SVG would be overkill. Because the clip is pure CSS, it costs no extra download and changes with a single line when the design moves on.
Hero Sections
Slanted or curved bottom edges on banners.
Avatars
Circles, hexagons and squircles for profile pictures.
Badges and Tags
Arrow and chevron labels for prices and steps.
Image Reveals
Animate an inset or circle to uncover a picture.
Section Dividers
Angled transitions between page sections.