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.” You can also add or remove points.
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.
3. Check the preview
Your changes appear in the preview in real time. For Polygon, use the “Show Points” checkbox below the preview 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
Open “Advanced Settings” to change the class name used in the generated CSS.
If needed, enable “Include -webkit-clip-path” to output the vendor-prefixed property as well.
6. Copy the CSS
The CSS code, including the class name, is generated automatically from your settings. Click “Copy Code” and add it 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()
Creates a custom polygon from multiple points.
You can 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 them 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()
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()
Clips an element into an ellipse.
You can set the horizontal and vertical radii separately to create wide or tall ellipses.
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
Can I use clip-path on images?
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?
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?
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?
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?
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?
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?
It is ideal for rectangular shapes, and you can use “Border Radius” to add rounded corners.
Can I round the corners of a Polygon?
To create a rounded rectangle, select
Inset and use “Border Radius.” What is “Snap to Grid”?
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?
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?
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?
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.
