How to Use the CSS Clip Path Generator
1. Select a shape type
Under “Shape Type,” select Polygon, Circle, Ellipse, or Inset. Polygon is recommended when you want to create a custom shape. You can also start with a preset such as a triangle, star, or arrow and edit it from there.
2. Customize the shape
For Polygon, drag the numbered points in the preview or enter X and Y values under “Point Coordinates.” Use the “+” button on a divider between points to add a point at that position. Remove an unnecessary point with the “×” button on the right of its row. Points cannot be removed when only three remain.
Under “Snap to Grid,” select 0.1%, 1%, 5%, or 10% to set the increment used when moving points.
For Circle, adjust the radius and center position. For Ellipse, adjust Radius X, Radius Y, and the center position. For Inset, adjust how far the shape is clipped from each side and set its Border Radius.
Use the “Flip Horizontally,” “Flip Vertically,” and “Rotate” buttons below the preview to flip the shape or rotate it 90° clockwise.
3. Check the preview
Your changes appear in the preview in real time. For Polygon, use the “Show Points” checkbox to the right of the “Preview” heading to show or hide the point numbers.
4. Set a background if needed
Turn on “Background Settings” to choose a Solid Color, Gradient, or Image. The selected background appears in the preview, and a background property is added to the generated CSS.
Select “Image” as the background type to use an uploaded image. Only the file name is added to url() in the background property, so update the file path to match your project.
5. Change the advanced settings
If needed, enable “Include -webkit-clip-path” to output the vendor-prefixed property as well.
6. Copy the CSS
The CSS properties are generated automatically from your settings. Click “Copy Code” and add them to your project.
To restore all settings to their initial values, click “Reset.”
What Is clip-path?
clip-path is a CSS property that defines the visible area of an HTML element or image, allowing you to clip it into a circle, polygon, or another shape. It does not change the element’s actual size. Instead, it shows only the area inside the specified shape and hides everything outside it.
You can use it to crop images into circles, create triangles, stars, and arrows, or add a wide range of decorative shapes to a web design. This generator supports the following four shape types.
polygon()
polygon() creates a custom polygon from multiple points. You can use it to create triangles, pentagons, stars, arrows, and many other shapes made from straight lines. Adjust the shape by dragging points in the preview or by entering precise X and Y coordinates.
In polygon(), each point is defined by a pair of X and Y coordinates. For example:
clip-path: polygon(
50% 0%,
100% 100%,
0% 100%
);These three points represent:
50% 0%: the center of the top edge100% 100%: the bottom-right corner0% 100%: the bottom-left corner
Connecting these points creates a triangle. X coordinates increase from left to right, while Y coordinates increase from top to bottom. Percentage values scale with the element, making the shape easier to use in responsive layouts.
circle()
circle() clips an element into a circle. You can adjust both the circle’s size and center position, which is useful when you want to focus on a specific part of an image.
ellipse()
ellipse() clips an element into an ellipse. You can set the horizontal and vertical radii separately to create wide or tall ellipses.
inset()
inset() clips an element into a rectangle by moving each edge inward from the top, right, bottom, and left. You can also add rounded corners, making it suitable for standard rectangles as well as card-like shapes.
FAQ
The shape does not appear after I apply the copied code
This generator outputs only the clip-path property used to clip the element. If the target element does not have dimensions such as width and height, the shape may not display correctly.
First, make sure the element receiving clip-path has sufficient width and height. Also check whether another CSS rule is overriding the clip-path property.
Can I use clip-path on images?
Yes. You can use it on many HTML elements, including img elements. For example, apply circle() to crop an image into a circle, or use polygon() to create a star, triangle, or another custom shape.
Does applying clip-path change the element’s size?
No. The clip-path property clips the visible area, so the element’s original width, height, and layout area do not change. Even the hidden portions are still treated as part of the element’s original size in the page layout.
What do the points in polygon() represent?
They represent the positions of the points that make up the shape. Each point is written in X-coordinate Y-coordinate order, and the points are connected with straight lines in the order they are defined. The last point is automatically connected to the first to close the shape.
How many points can I add?
CSS clip-path: polygon() itself does not set a maximum number of points. However, a valid polygon generally requires at least three points. In this tool, adding an excessive number of points may reduce performance and make the shape harder to edit.
Why did the shape look strange after I added a point?
In polygon(), points are connected in the order they are defined. If that order causes lines to cross, the result may not look as expected. Check each point’s position and arrange the points in order around the outer edge of the shape.
Can clip-path be responsive?
Yes. This generator primarily outputs coordinates as percentages, so the shape scales when the element’s width or height changes. However, a major change in aspect ratio can also change how the shape looks, so check the result at several viewport sizes, including desktop and mobile.
When should I use Inset?
Use it when you want to clip a specific amount from the top, right, bottom, or left of an element. It is ideal for rectangular shapes, and you can use “Border Radius” to add rounded corners.
Can I round the corners of a Polygon?
This generator does not currently support rounded corners for Polygon shapes. To create a rounded rectangle, select Inset and use “Border Radius.”
What is “Snap to Grid”?
It controls the coordinate increment used when you drag a point in the preview. Choose 0.1%, 1%, 5%, or 10% to keep coordinates aligned to a consistent interval. This is useful when creating symmetrical shapes or keeping coordinates at clean values.
Do I need to include -webkit-clip-path?
In most cases, current major browsers only require the standard clip-path property. If you need compatibility with older browser environments, open “Advanced Settings” and enable “Include -webkit-clip-path.”
Are uploaded images saved on the server?
No. Uploaded images are processed only in your browser and are not uploaded to the server, so you can use your own images safely.
Can I animate clip-path?
Yes. Combine clip-path with the CSS transition or animation property to animate changes between shapes. When animating between two polygon() shapes, use the same number of points in both shapes to make the transition smoother.
This generator is designed for creating clip-path shapes and generating their CSS; it does not generate animations.
