The Clip-Path Maker is a visual editor for the CSS <code>clip-path</code> property. Instead of hand-writing coordinate lists and second-guessing where each vertex lands, you drag points directly on a live preview and the tool emits ready-to-paste CSS. It covers the four shape functions the browser understands natively: <code>polygon()</code>, <code>circle()</code>, <code>ellipse()</code>, and <code>inset()</code>.
Under the hood, <code>clip-path</code> defines a region and hides everything outside it. A polygon is a comma-separated list of x/y pairs (usually percentages relative to the element's border box), traced in order and closed automatically — for example <code>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</code> renders a triangle. Because clipping only changes what is painted, the element keeps its original box dimensions for layout, and unlike an image mask it produces hard, resolution-independent edges.
This is faster and less error-prone than trial-and-error in DevTools, and it beats exporting flattened PNG shapes: the output stays crisp at any scale, animates on the GPU, and adds zero extra network requests. Use it to prototype a shape, copy the generated polygon clip-path CSS, and drop it straight into your stylesheet.
Building a shape, step by step
- 1
Pick a shape type — polygon, circle, ellipse, or inset — or start from a preset (triangle, hexagon, chevron, message bubble) to get a sensible set of points.
- 2
Drag the handles on the preview to move each vertex. For polygons, add or remove points to change the silhouette; the coordinates update live as you move them.
- 3
For circle and ellipse, adjust the radius and the reference position (the value after the <code>at</code> keyword); for inset, set the top/right/bottom/left offsets and an optional corner <code>round</code> radius.
- 4
Read the generated CSS beneath the canvas to sanity-check the values, then copy the full <code>clip-path</code> declaration and paste it onto your target element.
Where this shows up in real work
Angled and diagonal section dividers
Slice the top or bottom of a hero or section with a polygon so the next block appears to cut in at an angle, without exporting a background image or stacking rotated pseudo-elements.
Non-rectangular cards and avatars
Clip images or cards into hexagons, chevrons, or beveled corners. A circle clip-path is also the cleanest way to crop a square photo into a round avatar while keeping the original file.
Reveal and hover animations
Animating clip-path between two shapes (or an inset that opens up) creates wipe and reveal transitions that run on the compositor, which is smoother than animating width or height.
Custom tooltips and speech bubbles
Combine a rectangular body with a small polygon tail to build a chat bubble in pure CSS, avoiding an extra positioned triangle element.
Practical notes and gotchas
- Percentages are relative to the element's own box, so a shape defined in percent scales responsively when the element resizes — usually what you want. Mix in <code>px</code> only when you need a fixed inset regardless of size.
- Clipping removes the region from pointer events and paint, so anything outside the shape becomes unclickable and box-shadow gets cut off. Apply the shadow to a wrapper element instead of the clipped one.
- To animate between polygons, both keyframes must have the same number of points listed in the same order — the browser interpolates point-by-point. Duplicate a coordinate to pad a shape with fewer vertices.
- Prefer <code>clip-path</code> over the deprecated <code>clip</code> property; <code>clip</code> only supported rectangles on absolutely positioned elements and is effectively dead. Shape functions in <code>clip-path</code> are supported across all current evergreen browsers.
- Clipping is purely visual — it does not change the accessibility tree or reading order. Content clipped out of view is still exposed to screen readers and keyboard focus, so hide it properly if it should be gone.
Questions developers ask about clip-path
What is the difference between clip-path and mask in CSS?+
<code>clip-path</code> defines a vector region with a hard edge — pixels are either fully shown or fully hidden. <code>mask</code> uses an image or gradient as an alpha channel, which allows soft, feathered, and partially transparent edges but is heavier to compute.
Can clip-path be animated with CSS transitions?+
Yes, as long as both states use the same shape function with a matching structure. Polygons must have an equal number of points in the same order; the browser then tweens each coordinate, and the animation runs on the GPU.
Why is my box-shadow not showing on a clipped element?+
clip-path clips everything the element paints, including its shadow. Move the shadow to a parent wrapper, or use a drop-shadow filter on an ancestor so the shadow is painted outside the clipped region.
What units can I use in a polygon clip-path?+
Each point accepts length units (px, em, rem) or percentages, and you can mix them. Percentages are resolved against the element's border box, so 0% 0% is the top-left corner and 100% 100% is the bottom-right.
Is clip-path supported in all browsers?+
The basic shape functions — polygon(), circle(), ellipse(), and inset() — are supported in all current versions of Chrome, Edge, Firefox, and Safari. Referencing an external SVG <code><clipPath></code> via url() has narrower and less consistent support.
Does clip-path affect layout or just appearance?+
It only affects painting. The element keeps its full box size for layout and flow, so surrounding elements are positioned as if no clipping occurred — only the visible pixels change.