What shapes can the tool generate?

The tool generates polygon, circle, ellipse, and inset clip-path values. These cover the four CSS basic shape functions that browsers support for clip-path. Path() using SVG path data is not currently supported in the visual editor; you can manually enter path() values in the code editor panel.

Does clip-path work on all browsers?

Clip-path with basic shape functions (polygon, circle, ellipse, inset) has full support in all modern browsers including Chrome, Firefox, Safari, and Edge. The tool outputs the -webkit-clip-path prefix for older Safari versions. Internet Explorer does not support clip-path with CSS shapes (only SVG clipPath references), but IE has been retired and is not a target for modern projects.

Can I animate clip-path with CSS transitions?

Yes, if both the start and end states use the same shape function with the same number of points. For example, you can transition between two polygon() values with the same number of coordinate pairs. The tool can generate paired start/end states for a transition by letting you define and switch between two shape configurations.

How do I clip-path an SVG instead of an HTML element?

Apply clip-path directly to the SVG element or to individual SVG child elements using the same CSS property. The coordinate system for SVG elements defaults to the SVG viewport, not percentages of the element's bounding box, so you may need to adjust coordinates accordingly. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

What happens to content outside the clip region?

It is hidden visually but still exists in the DOM. Screen readers can still access it, and it still occupies space in the layout (clip-path does not affect the box model). For interactive elements (links, buttons) inside a clipped area, the clickable region follows the clip shape.

What is the difference between clip-path and mask?

Clip-path creates a hard-edged clipping region: pixels are either fully visible or fully hidden. The mask property (from the same CSS Masking spec) uses an image or gradient to apply partial transparency, allowing soft or blurred edges. Use clip-path for crisp geometric shapes; use mask for soft or image-based masking.

CSS Clip-Path Visualizer

This tool creates CSS clip-path values using a visual editor with drag handles. Choose a shape (polygon, circle, ellipse, or inset rectangle), drag the control points to position them, and the tool outputs the ready-to-use clip-path CSS. The live preview shows your element clipped in real time. Everything runs in your browser. Your configurations and generated code never leave your device.

How this tool works

The CSS clip-path property applies a clipping region to an element. Everything outside the region is hidden. The shape is defined using CSS basic shape functions or an SVG clipPath reference.

Worked example

You want to clip a hero image into a diagonal cut where the bottom edge angles from left to right, creating a slanted section divider. Shape: polygon Points: - Top-left: 0% 0% - Top-right: 100% 0% - Bottom-right: 100% 85% - Bottom-left: 0% 100%

Frequently asked questions

What shapes can the tool generate?
The tool generates polygon, circle, ellipse, and inset clip-path values. These cover the four CSS basic shape functions that browsers support for clip-path. Path() using SVG path data is not currently supported in the visual editor; you can manually enter path() values in the code editor panel.
Does clip-path work on all browsers?
Clip-path with basic shape functions (polygon, circle, ellipse, inset) has full support in all modern browsers including Chrome, Firefox, Safari, and Edge. The tool outputs the -webkit-clip-path prefix for older Safari versions. Internet Explorer does not support clip-path with CSS shapes (only SVG clipPath references), but IE has been retired and is not a target for modern projects.
Can I animate clip-path with CSS transitions?
Yes, if both the start and end states use the same shape function with the same number of points. For example, you can transition between two polygon() values with the same number of coordinate pairs. The tool can generate paired start/end states for a transition by letting you define and switch between two shape configurations.
How do I clip-path an SVG instead of an HTML element?
Apply clip-path directly to the SVG element or to individual SVG child elements using the same CSS property. The coordinate system for SVG elements defaults to the SVG viewport, not percentages of the element's bounding box, so you may need to adjust coordinates accordingly. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
What happens to content outside the clip region?
It is hidden visually but still exists in the DOM. Screen readers can still access it, and it still occupies space in the layout (clip-path does not affect the box model). For interactive elements (links, buttons) inside a clipped area, the clickable region follows the clip shape.
What is the difference between clip-path and mask?
Clip-path creates a hard-edged clipping region: pixels are either fully visible or fully hidden. The mask property (from the same CSS Masking spec) uses an image or gradient to apply partial transparency, allowing soft or blurred edges. Use clip-path for crisp geometric shapes; use mask for soft or image-based masking.