Home/Tools/Effects/Clip-Path Generator

Effects · Generator

Clip-Path Generator

Create complex shapes and masks with an interactive clip-path editor.

Clip-Path Settings

Shape Type

Width200px

Height200px

Edit Points

Point 1

X50%

Y0%

Point 2

X100%

Y50%

Point 3

X50%

Y100%

Point 4

X0%

Y50%

Preview

Clipped Element

Generated CSS, HTML & SVG

.clipped-element {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Clip Path Generator?

Generate clip-path values to mask elements into polygons, circles, ellipses, and custom shapes. Drag handles to shape the mask visually.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Clip Path Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Choose shape type

Select polygon, circle, ellipse, or inset from the shape buttons. A default shape appears on the preview element.

Drag the control points

Move the handles to reshape the mask. For polygons, double-click to add a point; click a point and press Delete to remove it.

Copy the clip-path value

Click Copy to grab the clip-path value. Apply it to an image, section, or any element.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Polygon shapes */
.triangle    { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.parallelogram { clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); }
.hexagon     { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }

/* Angled section break */
.section-angled {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* Circle mask */
.avatar { clip-path: circle(50%); }

/* Ellipse */
.hero-image { clip-path: ellipse(60% 40% at 50% 50%); }

clip-path hides everything outside the shape. The element still occupies its full layout space - only the visible area changes.

Pro tips

Pro tips for better results

★

clip-path does not affect layout

The clipped element still occupies its original box in the layout. Surrounding elements are not affected. Use negative margins or overlapping positioning if you need adjacent elements to follow the clip shape.

★

Use clip-path for angled section breaks

polygon(0 0, 100% 0, 100% 90%, 0 100%) on a section creates a diagonal bottom edge that overlaps the next section. Combine with negative margin-bottom to close the gap.

★

Transitions work on clip-path for reveal effects

clip-path values can be transitioned if both states have the same number of polygon points. This enables revealing animations where shapes expand or transform.

FAQ

Frequently asked questions

clip-path with basic shapes (polygon, circle, ellipse, inset) is supported in Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 79+. SVG path values for complex shapes have more limited support.

Yes, with CSS transition or animation - as long as both states have identical clip-path types with the same number of points. Animating between polygon(4 points) states works. Animating between a polygon and a circle does not.

No. Everything runs in your browser. Nothing is sent to a server.