CSS Clip Path Generator

Create CSS clip-path shapes visually. Pick a preset shape or drag points to build a custom polygon, preview it live, and copy ready-to-use CSS.

Drag any point on the shape to reshape it.

.clipped { clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }

Stop Hand-Coding Polygon Coordinates

Clip-path shapes look simple once they are finished, but writing the polygon points by hand means guessing percentages and reloading the page again and again. This tool turns that guesswork into dragging: pick a starting shape, move the points until the outline matches what you need, and the CSS updates as you go.

Why Use This Generator?

15 Ready-Made Shapes

Start from circles, stars, arrows, speech bubbles, and more instead of typing coordinates from scratch.

Drag-to-Edit Points

Grab any point on the preview and move it. The clip-path value updates live as you drag.

Multiple Preview Backgrounds

Switch between light, dark, and gradient backgrounds to see how the edges look against real content.

Clean, Copy-Ready CSS

The output is a single clip-path declaration, formatted and ready to paste into your stylesheet.

How this CSS Clip Path Generator works

This tool builds a clip-path value the same way you would sketch a shape on paper: by placing points and adjusting them until the outline looks right. Pick a preset from the shape grid, such as a hexagon, star, or message bubble, and the preview instantly clips the sample box to that outline using the CSS clip-path property. Behind the scenes, each preset is stored as a list of coordinate pairs given in percentages, so the shape scales correctly no matter how big or small the final element is.

Every polygon shape lets you drag any point directly on the preview. Each drag recalculates the point's position as a percentage of the box width and height, then rebuilds the polygon() function with the new coordinates. Because clip-path only hides parts of an element rather than resizing it, the underlying background stays in place while the visible area changes shape, which is why the preview lets you switch between light, dark, and gradient backgrounds to check how the edges and contrast will look against real content.

The generated CSS is a single declaration you can paste onto any element with a defined width and height. Modern browsers render clip-path natively, so no JavaScript is needed on your site, only the copied rule. Everything runs in your browser using plain calculations; nothing you design here is uploaded or stored.

How to use this CSS Clip Path Generator

1

Pick a shape

Choose a preset like circle, hexagon, star, or arrow, or start from a custom polygon.

2

Drag the points

Fine-tune the shape by dragging its corner points directly on the preview.

3

Copy the CSS

Grab the finished clip-path rule and paste it into your stylesheet.

Frequently Asked Questions

What is the difference between clip-path and the older mask-image property?
clip-path shows or hides parts of an element using a hard-edged shape such as a polygon, circle, or ellipse. mask-image can use a gradient or an image's alpha channel to fade areas in and out, so it supports soft edges and transparency gradients that clip-path cannot produce. For a sharp geometric cutout like the shapes in this tool, clip-path is the simpler and better-supported choice.
Why is my clip-path not showing any effect on the element?
The most common cause is that the element has no set width and height, so there is nothing visible for the shape to reveal beyond the content's natural size. Clip-path also does nothing on inline elements by default, so set the element to block, inline-block, or flex first. Check for a typo in the polygon() syntax too, since one missing percent sign or comma silently breaks the value in most browsers.
Can I use clip-path on a background image instead of an actual img tag?
Yes. Clip-path works on any element, so you can apply it to a div with a background-image, background-color, or gradient, not just an img element. That is actually the safer option for responsive designs, since a clipped img can look distorted if its aspect ratio does not match the container.
Can I animate or transition between two clip-path shapes?
Yes, but only smoothly if both shapes use the same clip-path function and, for polygon(), the same number of points in the same order. Transitioning from a 6-point hexagon to a 10-point star will jump instead of morphing, so add extra duplicate points to the simpler shape until both polygons match in count.
Does clip-path affect the actual clickable area of an element?
In most modern browsers, yes. Clicks outside the visible clipped shape pass through to whatever is behind the element, and clicks inside the shape still register on it. This differs from simple overflow hiding, where the full rectangular box stays clickable even in the hidden parts.
Which browsers support the CSS clip-path property?
All current versions of Chrome, Firefox, Safari, and Edge support clip-path with polygon(), circle(), ellipse(), and inset() values. Support has been solid since around 2017, so the only real risk is very old browser versions, which is rare on modern traffic.
How do I make the shape responsive so it still looks right on mobile?
Because every point in this tool is stored as a percentage rather than a fixed pixel value, the shape automatically scales with the element's width and height. You do not need extra media queries for the shape itself, just make sure the container element resizes the way you want across breakpoints.
Can I import an SVG path instead of using polygon points?
Clip-path also accepts an SVG clipPath element referenced by URL, which supports curves that straight-line polygons cannot produce. This tool focuses on the polygon(), circle(), and ellipse() functions since they need no separate SVG markup and cover the vast majority of common shapes.
Does a complex clip-path shape slow down page performance?
No, not noticeably. Browsers render clip-path on the GPU compositing layer, so even a polygon with a dozen points has a negligible performance cost compared to things like large box-shadows or backdrop filters.
Does this tool save or upload the shapes I create?
No. Every point, drag, and shape calculation happens locally in your browser with JavaScript. Nothing is sent to a server or stored anywhere unless you copy the CSS yourself.

Related Tools

Try It

CSS Formatter

Format CSS code for better readability.

Try It

Gradient Generator

Generate the gradient using two colors

Try It

CSS Box-Shadow Generator

Design custom CSS box shadows with a live preview. Adjust offset, blur, spread, and color, stack multiple layers, and copy the code.

Try It

CSS Triangle Generator

Create CSS triangles with a live preview. Pick a direction, size, and color, choose the border-trick or clip-path method, and copy the code.

Try It

CSS Background Maker

Design solid, gradient, and pattern backgrounds with a live preview. Adjust colors, angle, position, and spacing, then copy ready-to-use CSS.

Try It

CSS Loader Generator

Build CSS loading spinners with a live preview. Pick a style, adjust size, color, and speed, then copy ready-to-use CSS and HTML.

The CSS Clip Path Generator is maintained by CodeItBro. We aim to provide the best free developer tools on the web. If you have feedback or suggestions, please visit our contact page.

Comments

Questions, corrections, and useful tips are welcome. Comments are reviewed before publication.

Loading comments...

Comments are stored and moderated using Cusdis Cloud. Email is optional. Privacy Policy

As featured on

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge