CSS Clip-path Maker

About CSS Clip-path Maker

Create CSS Clip-Path Shapes Visually and Copy the Code

Import Existing CSS and Export the Result

The current editor accepts a clip-path declaration or shape function for parsing. Polygon mode supports 3 to 24 points, including pointer and keyboard movement. You can copy CSS or download CSS and SVG files after reviewing the preview.

The CSS Clip-Path Generator helps you build custom clipping shapes without calculating every CSS coordinate by hand. You can work with circle, ellipse, polygon, or inset shapes, adjust them visually with draggable controls, watch the result update on the preview, and copy the generated clip-path property into your CSS.

It’s especially useful when a normal rectangle doesn’t fit the design. You can clip images, divs, cards, hero areas, or full page sections into more interesting shapes while keeping the effect in CSS.

What CSS clip-path actually does to an element

The clip-path property defines the visible region of an HTML element. Anything inside that region remains visible, while anything outside it is hidden from view.

Think of it like placing a shaped window over an element. The element still exists at its normal size, but visitors only see the part that falls inside the clipping shape.

You can apply the generated property to an image, a div, a section, or another HTML element. It isn’t limited to image cropping.

Watch for this

CSS clip-path hides the parts outside the selected shape, but it doesn’t crop or reduce the original image file. The browser still loads the full image or element. Use image optimization separately if your goal is to reduce download size.

Choose between circle, ellipse, polygon, and inset

This clip-path generator supports four verified shape modes: circle, ellipse, polygon, and inset. Each solves a different type of design problem.

A circle works well when you want a round crop. An ellipse gives you a wider or taller oval shape. Inset creates a rectangular clipping area positioned inward from the element edges.

Polygon is the most flexible option because you can work with several coordinate points. That makes it useful for angular layouts, irregular image frames, diagonal edges, and shapes that can’t be described with a simple circle or rectangle.

Good to know

Use circle, ellipse, or inset when the shape can stay simple. Switch to polygon when you need angled corners, asymmetrical sections, or a custom outline made from several points. Polygon mode gives you much more control, but it also has more coordinates to manage.

Polygon mode lets you build your own custom shape

A CSS polygon is defined by a list of points. Each point has a horizontal and vertical position, and the browser connects those points to create the clipping boundary.

For example, a basic polygon value might look like clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%). Those four positions create an element with a diagonal lower edge.

You don’t need to type every percentage manually here. The visual editor lets you drag polygon points and see the resulting shape immediately.

You can also add multiple points when a four-corner shape isn’t enough. That lets you build more detailed custom outlines instead of being restricted to a small set of fixed polygons.

Dragging points is easier than guessing CSS coordinates

Writing polygon coordinates directly in a stylesheet can involve a lot of trial and error. A small change such as moving one corner upward means finding the correct point, changing its percentage, refreshing the result, and checking the shape again.

The visual approach shortens that feedback loop. You move a handle, inspect the preview, and keep adjusting until the shape matches the layout you have in mind.

Once the result looks right, copy the generated CSS and place it on the element in your stylesheet.

Create a diagonal section divider with CSS

One common reason people search for a CSS clip-path generator is to create diagonal section dividers. Instead of ending a hero or content block with a straight horizontal line, you can clip one edge at an angle.

Polygon mode is a natural fit for this. Keep the upper points near the top corners, then position the lower-left and lower-right points at different heights.

Example

Suppose your landing page has a large hero image and you want the bottom edge to slope upward. Build a four-point polygon, keep both top points at the corners, then move one lower point higher than the other. Copy the resulting clip-path rule and apply it to the hero section or image.

You can make the angle subtle or aggressive by moving the lower points. Because you’re editing the clipping boundary, you don’t need to modify the original image to create the diagonal effect.

Clip an image into a custom shape with CSS

You can apply clip-path directly to an image element. That’s useful for profile graphics, product images, feature illustrations, decorative photos, or any layout where a standard rectangular image feels too plain.

A circle can create a round image crop. An ellipse gives you an oval. Polygon lets you build an angular frame with as many points as your shape needs.

The original image remains unchanged. Only the way the browser displays that element is affected.

Circle mode gives you a simple round clipping region

A circle clip-path is based on a radius and a center position. A typical CSS value follows the form circle(), with the shape positioned relative to the element.

This works well for avatars, decorative photos, circular highlights, and other layouts where you want the visible area to stay round.

Using a generator is useful when the circle shouldn’t sit exactly in the middle. You can adjust the shape visually instead of repeatedly editing its center coordinates.

Ellipse mode works when a circle is too restrictive

An ellipse behaves like an oval rather than a perfect circle. Its horizontal and vertical dimensions can differ, which makes it useful for wide banners, portrait-style crops, and soft oval cutouts.

This gives you more control over the visible region of rectangular elements. You can keep the shape centered or adjust its position to focus on a different area of the element.

If a circular crop removes too much content from the sides or top, an ellipse may fit the design better.

Inset clips inward from the element edges

Inset is useful when you still want a mostly rectangular shape but need to control where the visible area starts and ends.

Instead of defining several polygon vertices, the inset shape is based on distances from the element edges. That makes it easier to understand for layouts that don’t require angular boundaries.

Choose it when your shape can remain rectangular and polygon would only add unnecessary complexity.

Use the live preview before copying your CSS

The preview is there to help you judge the shape before placing it into a real layout. As you move the controls, you can see how much of the sample element remains visible.

This matters with more complex polygon shapes because one poorly positioned point can create a sharp angle or hide more of the element than you expected.

Keep adjusting until the boundary feels balanced. Then copy the generated clip-path property into your stylesheet and test it on the actual element.

Percentage coordinates help shapes adapt to element size

Polygon clip paths are commonly described using percentage coordinates such as 0% 0% or 100% 80%. Those values are relative to the clipping reference area rather than being tied to one fixed screen position.

That makes percentage-based shapes useful for responsive layouts because the clipping points can move with the size of the element.

You should still test the final shape at different widths. A polygon that looks balanced on a wide desktop hero can feel much steeper when the same element becomes narrow on a phone.

A CSS shape can change without editing the source image

One advantage of clip-path is that presentation stays separate from the source asset. You don’t need to open an image editor and permanently cut the photo into an angled or circular file just to match one page design.

The same source image can remain rectangular in your files while CSS changes how it appears in one specific component.

If the design changes later, you can replace or remove the clip-path rule instead of creating another edited image.

Clip-path doesn’t reduce image download size

This deserves its own reminder because visual cropping and file optimization are different jobs.

If a 3 MB image is clipped into a small polygon, the browser still needs the original image resource. Hiding half of its visible area doesn’t automatically remove half of the file data.

So, use clip-path for visual design. Resize, compress, or convert the actual image separately when performance is the concern.

Apply the generated CSS to sections and divs too

Clip-path isn’t only an image-shaping property. You can apply it to block elements such as divs and page sections.

That opens up different uses. You can create an angled hero section, clip a colored background into an irregular shape, build a custom card silhouette, or make one section overlap visually with the next.

The generator only creates the clipping property. Your element can still use normal CSS for its background, dimensions, spacing, typography, and other styling.

Custom polygon points help with more complex layouts

A fixed four-point polygon is enough for a diagonal divider, but some shapes need more control.

Polygon mode lets you add and drag multiple points, so you can create outlines with extra corners or changes in direction. Each added point becomes another vertex in the generated polygon.

More points also mean more complexity. Add them because the shape needs them, not simply because you can.

A clean four- or five-point polygon is often easier to maintain than a crowded shape with many tiny coordinate changes.

Test clipped content for readability

A shape can look interesting while still causing usability problems. If you clip a section containing text, buttons, or other controls, make sure the visible region doesn’t hide anything people need to read or click.

This is especially important on smaller screens because the element dimensions may change significantly.

Decorative backgrounds and images are generally easier places to experiment. Functional content needs more careful testing.

The generated clip-path is still normal CSS

The output isn’t tied to this generator after you copy it. It’s a standard CSS property that you can place in a stylesheet, component file, theme, or other front-end code.

You can also edit the coordinates manually later. The generator simply gives you a visual way to reach the starting value faster.

For example, you could create one polygon here, copy it, and then fine-tune a point in your own CSS after testing it in the real layout.

No files are uploaded while you design the shape

This tool generates CSS on the client side. It doesn’t need to upload a project file, image, stylesheet, or design to a server to calculate the clip-path value.

Yes

The CSS Clip-Path Generator runs in your browser. Shape editing, the live preview, and CSS generation happen locally, so nothing needs to be uploaded for the tool to create your clip-path property.

You can use the generator without creating an account. Once you have the shape you need, copy the CSS and continue working in your own project.

When a CSS clip path generator is most useful

• Creating a diagonal section divider with CSS
• Clipping an image into a circle or ellipse
• Building a custom polygon image shape
• Adding angled edges to hero sections
• Creating irregular div or card outlines
• Testing polygon coordinates visually
• Generating clip-path CSS without calculating every point manually

You don’t need clip-path for every rounded or rectangular design. Use it where the shape itself adds something useful to the layout.

Related CSS generators for other visual details

Build the shape visually, then use the CSS anywhere

The CSS Clip-Path Generator gives you a visual way to work with circle, ellipse, polygon, and inset clipping shapes. You can drag controls, add polygon points when a custom outline needs more detail, inspect the live preview, and copy the resulting CSS.

Use it to shape images, divs, and sections without permanently editing the underlying content. Just remember that clipping changes what people see, not what the browser downloads.

Once the shape is right, copy the generated clip-path property, add it to your element, and test the result across the screen sizes your layout needs to support.