CSS Clip-Path Generator

Q: What is the CSS clip-path property?

The clip-path property in CSS is a powerful feature that lets you hide parts of an element to create interesting shapes. Instead of having a normal rectangular element, you can clip it to a circle, an ellipse, or a complex polygon with many points.

Q: How does the custom polygon tool work?

When you select the Polygon shape, we place an invisible SVG layer over the preview image. When you click, you are adding a point to that layer. The tool records the percentage-based coordinates of all the points you've added and uses them to build the polygon(...) function in CSS.

Q: Is the clip-path property supported by all browsers?

The clip-path property is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, very old browsers like Internet Explorer do not support it.

Tools

CSS Clip-Path Generator

Add to Favorites Remove from Favorites

Controls

Basic Shapes

Inset Circle Ellipse Polygon

Inset Options

Top

Right

Bottom

Left

Radius

Circle Options

Size

Position X

Position Y

Ellipse Options

Radius X

Radius Y

Position X

Position Y

Polygon Options

Click on the preview to add points. Drag points to move them.

Or, start with a preset:

Triangle Rhombus Trapezoid Star Cross Message

Clear Points

Custom Image URL (Optional)

Preview

Generated CSS Copy CSS

About the CSS Clip-Path Generator

We built this tool to make working with the CSS clip-path property fun and easy. Instead of writing the complex code by hand, you can use our visual editor to create shapes and see the results instantly. You can start with a preset shape like a circle or star, or create a completely custom polygon by clicking and dragging points. The tool generates the CSS code for you, which you can copy and paste right into your project.

How to Use the Tool

Start by choosing a basic shape like "Inset," "Circle," "Ellipse," or "Polygon" from the top of the controls panel.
For basic shapes, use the sliders to adjust the size, position, and other properties. The preview will update live.
For the "Polygon" shape, you can click on the preview image to add points, and drag any point to move it.
You can also load a preset polygon shape like a triangle or a star to get started.
The final CSS code is always visible in the "Generated CSS" box, ready for you to copy.
You can even paste a URL to your own image in the "Custom Image URL" box to see how the clip-path looks on it.

Frequently Asked Questions

What is the CSS clip-path property?

The clip-path property in CSS is a powerful feature that lets you hide parts of an element to create interesting shapes. Instead of having a normal rectangular element, you can "clip" it to a circle, an ellipse, or a complex polygon with many points. It's a great way to create unique layouts and visual effects without using image editing software.

How does the custom polygon tool work?

When you select the "Polygon" shape, we place an invisible SVG layer over the preview image. When you click, you are adding a point (a small circle) to that layer. The tool records the percentage-based coordinates of all the points you've added and uses them to build the polygon(...) function in CSS. You can click to add points and drag them to adjust the shape.

Are the generated clip-path values responsive?

Yes. All the values for the shapes are generated using percentages. This means that the shape will scale gracefully with the size of your element. If you apply the generated CSS to an image that changes size, the clip-path will adapt and always maintain its proportions relative to the element's dimensions.

Is the clip-path property supported by all browsers?

The clip-path property is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, very old browsers like Internet Explorer do not support it. Our generated code is standard and will work in any browser that supports CSS clip-paths.

Is my data safe with this tool?

Yes, completely. This tool runs entirely in your web browser. Any images you preview by URL are loaded directly by your browser, and all calculations happen on your own computer. We never see or store any of the shapes you create or the images you use.