CSS Clip-Path Generator

Visually generate CSS clip-path clipping path code, supporting shapes such as polygons, circles, and ellipses, with batch image processing supported.

Bug report

Browser execution mode: Your data is processed in your browser and is not uploaded to the server.

Speed and Stability: Processing speed depends on your device and browser. For large batch work, the desktop version may be more stable.

Loading tool, please wait...

If the online tool fails to load or run, try the desktop tool.https://tools.yikeaigc.com/

Tool Usage

Return to old version

Set a clip path first, then copy code or batch process images

After choosing a preset shape, drag polygon control points, or switch to circle, ellipse, or inset rectangle and adjust parameters. Batch processing uses the current path. When uploading multiple images, only the first 20 are shown, but all are processed.

Current path info

Typepolygon

Control points3

Tip: finish setting the path before copying code or processing images.

Live preview In polygon mode, drag blue control points; coordinates will generate CSS in sync.

Coordinates: relative to the element; top-left is 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Shape and preset Choose type, then adjust parameters

Shape type

Preset category

Path parameters Values support percentages

Coordinate text

Radius

Center X

Center Y

Horizontal radius

Vertical radius

Center X

Center Y

Top

Right

Bottom

Left

Rounded corners

Preview & output Background only affects preview and image export

Preview width (px)

Preview height (px)

Color A

Color B

Gradient Angle

Preview image

Show element bounds Include -webkit prefix Generate class selector

Generate code

Code updates in real time with settings.

Batch apply current path Set the path in the previous step before processing images.

Click or drop images here Supports common formats such as JPG, PNG, WebP, GIF, BMP

No images selected.

Output settings PNG supports transparent backgrounds

Output format

Size mode

Limit long side (px)

Custom width (px)

Custom height (px)

Output Quality92%

Make outside crop transparent Use current path

Waiting to process.

Image preview & results Shows first 20 after upload; all files will be processed.

Images to process0 images

Select images to view thumbnails.

Results0 images

Result thumbnails appear after processing.

Instructions

Software Usage Instructions

Design the clipping path: After entering the tool, first choose a shape type in the “Design Path” step. You can use a polygon, circle, ellipse, or inset rectangle.
Select a preset shape: Choose a preset from basic shapes, arrows and symbols, or decorative shapes, then adjust the parameters as needed.
Edit path parameters: For polygons, you can drag control points or enter percentage coordinates in the coordinate text box. For circles, ellipses, and inset rectangles, you can directly enter the radius, center point, margins, and border radius.
Set the preview effect: Adjust the preview width and height, gradient colors, and gradient angle, or choose an image as the preview content.
Copy CSS code: After confirming the result, click “Copy clip-path” or “Copy CSS”. You can choose whether to include the -webkit prefix and class selector.
Batch process images: Click “Next: Batch Process”, select multiple images, set the output format, quality, and size mode, then start processing.
Download results: After processing is complete, click “Download All Results ZIP”. Output files will use the original file names as much as possible, and duplicate names will automatically have numbers added to distinguish them.

FAQ

A: clip-path is used to clip an element into a specified shape. It is commonly used for custom-shaped image displays, card edge designs, button shapes, decorative web graphics, and interactive animations.

A: polygon creates a polygon using multiple coordinate points; circle creates a circular clipping area; ellipse creates an elliptical clipping area; inset creates an inset rectangle and supports border radius parameters.

A: Coordinates are expressed as percentages. For example, 50% 0% represents the middle of the top edge of the element, and 100% 100% represents the bottom-right corner. Separate each point with a comma. At least 3 points are required.

A: -webkit-clip-path is used for compatibility with some WebKit-based environments. To improve compatibility, you can keep both the prefixed and standard versions.

A: You can choose common image formats as input, and output supports PNG, JPEG, and WebP. PNG is suitable for preserving transparent areas, JPEG is suitable for generating smaller files, and WebP is suitable for balancing file size and image quality.

A: The tool will try to keep the original file names and replace the extension according to the output format. If duplicate file names exist, a number will be added after the file name to prevent results from overwriting each other.