{ SVG Clip Path Generator }

// draw clip paths visually, export CSS instantly

Create SVG clip paths for masking images and shapes with custom polygon, circle, and ellipse paths. Visual editor with live preview and CSS export.

PRESETS:
// CLIP PATH EDITOR
No image — click to upload
// CSS OUTPUT
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
// SVG CLIP-PATH
<clipPath id="myClip"> <polygon points="..."/> </clipPath>
// LIVE PREVIEW
PREVIEW
CSS clip-path applied to element
// POINTS TABLE
#X%Y%

HOW TO USE

  1. 01
    Choose a preset or draw

    Select a shape preset or drag the control points on the canvas to define your clip path polygon.

  2. 02
    Adjust the shape

    Drag handles to reposition points. Double-click an edge to add a new point. Use the table to enter precise values.

  3. 03
    Copy the output

    Copy the CSS clip-path property or the raw SVG <clipPath> element and paste into your project.

FEATURES

Polygon Editor Circle / Ellipse Inset (Rounded Rect) Live Preview Image Upload Preset Shapes SVG + CSS Export Points Table

USE CASES

  • 🔧 Masking hero images with custom polygon shapes
  • 🔧 Creating diagonal section dividers
  • 🔧 Building geometric avatar/thumbnail cutouts
  • 🔧 Generating SVG clip masks for data visualizations

WHAT IS THIS?

The SVG Clip Path Generator is a visual editor for creating CSS clip-path values and SVG <clipPath> elements. Drag control points on the canvas to define polygon shapes, or switch to circle, ellipse, and inset modes for non-polygon masks. All output is percentage-based and responsive.

RELATED TOOLS

✂ CSS Clip Path ⚡ SVG Optimizer 🎭 CSS Mask 🫧 Blob Shape 🌊 Wave SVG

FREQUENTLY ASKED QUESTIONS

What is a CSS clip-path?

The CSS clip-path property defines a clipping region that determines what part of an element is visible. Anything outside the path is hidden. It supports shapes like polygon(), circle(), ellipse(), and inset().

What is the difference between CSS clip-path and SVG clipPath?

CSS clip-path is a shorthand that works on HTML elements directly. SVG <clipPath> is the underlying SVG element — more powerful for complex paths, reuse, and animations. Both achieve the same visual result for basic shapes.

Are the generated values responsive?

Yes. All polygon points and shape values are expressed as percentages, so they scale proportionally with the element size. You can apply the CSS to any element and it will adapt to its dimensions.

How do I add more points to the polygon?

Double-click on any edge of the polygon in the editor canvas to insert a new control point at that location. You can then drag it to fine-tune its position, or delete it with the "− Point" button after selecting it.

What browsers support clip-path?

All modern browsers support clip-path for basic shapes. Chrome, Firefox, Edge, and Safari all have full support. Internet Explorer does not support it. For maximum compatibility, the SVG <clipPath> approach has slightly wider support.

Can I use clip-path for image masking?

Absolutely. Apply clip-path to an <img> tag or a <div> containing a background-image. Upload a sample image in the editor to preview exactly how your chosen shape will mask it.

Does clip-path affect clickable area?

Yes — by default, the clipped area (the invisible part) is not interactive. Pointer events do not fire outside the clip region. If you need full click coverage, add pointer-events: bounding-box or use the clip-path only on a pseudo-element overlay.

Can I animate clip-path?

Yes! CSS transitions and animations work on clip-path values when the shape type matches. For example, you can smoothly animate between two polygon() values with the same number of points using transition: clip-path 0.4s ease.

SVG Clip Path Generator — Create Custom Clip Paths Visually

The SVG Clip Path Generator is a free, browser-based visual editor for building CSS clip-path values and SVG <clipPath> elements. Whether you need a simple triangle crop, a diagonal section cut, or a complex polygon mask, this tool lets you drag control points in real time and instantly see the result on a live preview element.

💡 Looking for premium SVG templates and UI kits? MonsterONE offers unlimited downloads of templates, icons, illustrations, and assets — worth checking out.

What is a Clip Path in CSS and SVG?

A clip path defines a visible region for an element. Everything inside the path is shown; everything outside is hidden. In CSS, this is expressed with the clip-path property using functional notations like polygon(), circle(), ellipse(), and inset(). In SVG, a <clipPath> element containing any SVG shape serves the same role and can be referenced by other elements using the clip-path="url(#id)" attribute.

Both approaches produce identical visual results for basic shapes, but SVG clip paths have the added advantage of supporting more complex path data (<path d="...">), text clipping, and easy reuse across multiple elements. This generator supports all four CSS shape functions plus the raw SVG clipPath export for maximum flexibility.

Supported Clip Path Types

This tool supports every clip path type you're likely to need in a real project:

How to Use the Visual Polygon Editor

The editor canvas is a 400×300 virtual viewport. Control points appear as small square handles at each polygon vertex. To edit your shape:

Reading the CSS Output

The CSS output panel shows the exact clip-path declaration ready to paste into any stylesheet. Values use percentages so the clip scales with the element:

Apply it directly to <img>, <div>, <video>, or any other element. For IE/old Edge fallback, pair it with the SVG export and reference the <clipPath> using the clip-path="url(#id)" attribute on an SVG <image> element.

Animating Clip Paths

One of the most powerful features of CSS clip-path is smooth animation. Add a transition to get morphing shape effects on hover, scroll, or state change:

This technique is commonly used for hover reveals on portfolio items, expanding hero sections, and staggered entrance animations controlled via JavaScript class toggling.

Clip Path vs CSS Mask

While both clip-path and CSS mask hide portions of an element, they work differently. clip-path produces hard edges — a pixel is either fully visible or fully hidden. CSS mask-image supports soft gradients and alpha transparency in the mask, allowing for feathered edges and partial visibility. For clean geometric shapes with sharp outlines, clip-path is the better choice. For complex, organic, or gradient-edged masks, mask-image is more appropriate. JLV DevTools also offers a dedicated CSS Mask Generator for gradient-based masking.

Browser Support and Fallbacks

The CSS clip-path property is supported in all modern browsers: Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 79+. Internet Explorer has no support. For projects that must support IE or very old mobile browsers, using an inline SVG with a <clipPath> and an <image> tag provides a more compatible alternative. This generator exports both formats so you can choose the right one for your target audience.

☕