CSS Clip-Path Generator

Create custom shapes with ease. This powerful CSS Clip-Path Generator lets you visually create CSS clip-path shapes for your web projects.

Key Features

Visual Editor: Drag points to create and modify shapes in real-time
Preset Shapes: Quick access to common shapes like triangles, circles, and polygons
Advanced Options: Support for polygon(), circle(), ellipse(), and inset() functions
Copy-Ready Code: One-click copying of CSS clip-path values
Right-Click Controls: Delete points with a simple right-click
Reset Function: Revert to original shape positions instantly

Perfect for designers and developers who need precise control over element shapes. No more manual coordinate calculations or trial-and-error adjustments. Shape your web elements exactly how you want them.

Why Use It?

Create engaging UI elements, unique image masks, and creative layouts without graphics software. Works seamlessly across modern browsers. Start shaping the web, visually.

Getting Started Guide

A step-by-step introduction to using the CSS clip-path generator:

Choose a Shape: Select from preset shapes or start with a blank canvas
Customize Points: Drag points to adjust the polygon coordinates
Fine-tune: Use the visual editor for precise adjustments
Copy Code: Get the generated CSS for your project

Tips & Best Practices

Use percentage values for better responsive design
Combine shapes to create complex geometric patterns
Test across different browsers for compatibility
Consider adding fallbacks for older browsers
Keep shapes simple for optimal performance

Examples Gallery

Showcase practical applications of clip-path:

Hero Sections: Create unique header designs
Image Masks: Apply creative photo frames
UI Components: Design modern interface elements
Animated Shapes: Demonstrate transition effects
Layout Elements: Show structural design patterns

Common Use Cases

Popular applications in modern web development:

Creating unique UI/UX designs
Building interactive web components
Implementing creative CSS animations
Designing custom image masks
Developing engaging landing pages

What Is a CSS Clip-Path Generator?

A CSS clip-path generator is a visual editor that produces ready-to-use clip-path property values without writing coordinates by hand. You drag points, pick a shape, and copy one line of CSS directly into your stylesheet.

The generator handles the coordinate math so you don't have to. Every output targets the same native clip-path property, which defines a visible clipping region on any HTML element. Everything outside that region is hidden.

What shape functions does a generator support?

Most clip-path generators cover the 4 core shape functions built into the CSS Shapes Module Level 1 spec.

Function	Shape produced	Best for
`polygon()`	Any multi-point shape	Triangles, stars, arrows, hexagons
`circle()`	Perfect circle	Avatar crops, icon masks
`ellipse()`	Oval	Soft hero section edges
`inset()`	Rounded or sharp rectangle	Image cropping, card reveals

The generator outputs a single CSS declaration: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%). Apply it to any selector.

Clipping is binary. A pixel is either fully visible or fully hidden. There is no gradient transparency, no partial fade. That is the key difference from the CSS mask property.

What is the output format?

Percentage-based coordinates are the default output in every reputable generator. They scale with the element's bounding box, which keeps clipped shapes proportional across screen sizes.

Fixed-pixel output does exist in some tools but breaks on smaller viewports. Stick with percentages for any responsive design context.

How Does the CSS Clip-Path Property Work?

The clip-path property defines a clipping region on an element. Only the content inside that region renders. The rest is hidden visually but still exists in the DOM and remains accessible to screen readers.

Key behavior: clipped elements keep their layout space. A 300px-wide div clipped to a triangle still occupies 300px in the document flow. That surprises a lot of developers the first time.

polygon() syntax and coordinate pairs

Each polygon() point is an x/y coordinate pair. Coordinates are written as percentages relative to the element's width and height.

Top-left corner: 0 0
Top-right corner: 100% 0
Bottom-right corner: 100% 100%

A triangle needs just 3 pairs. A star needs 10. The polygon point editor in tools like Clippy by Bennett Feely visualizes each coordinate as a draggable handle, so you never write raw pairs manually.

circle() and ellipse() radius syntax

circle() syntax: circle(radius at center-x center-y). Example: circle(50% at 50% 50%) crops an element into a perfect circle centered on itself.

ellipse() syntax: ellipse(rx ry at cx cy). Two separate radius values control width and height independently. Both functions accept percentage values, so shapes scale correctly across viewports.

inset() for rectangular clips with optional rounding

inset() accepts 4 offset values (top, right, bottom, left) measured from the element edges. Add round at the end for rounded corners.

Example: inset(10px 20px 30px 20px round 10px). Handy for image crop reveals inside card components without touching the card layout.

The path() function also exists and accepts raw SVG path data, but it uses fixed pixel coordinates that don't scale with the element. As of Chrome 133+ and Safari 18.4+, the newer shape() function solves this with percentage-based path commands (Chrome for Developers, 2025).

How Do You Use a CSS Clip-Path Generator Step by Step?

The workflow is the same across all major generators. 5 steps from opening the tool to a working clip on your element.

Step 1: Select your base shape. Choose polygon, circle, ellipse, or inset from the shape selector. Polygon is the default in most tools because it covers the widest range of output shapes.

Step 2: Drag the control points. Each vertex on the polygon is a draggable handle. Move them to define your clipping region. The visible preview area updates in real time.

Step 3: Copy the generated value. The output panel shows the full clip-path declaration. One click copies it. The value looks like: clip-path: polygon(50% 0%, 100% 100%, 0% 100%).

Step 4: Paste into your stylesheet. Apply to the target selector. For Safari versions below 13.1, also add -webkit-clip-path with the identical value. CSS Portal outputs both automatically. Clippy does not.

Step 5: Test at multiple viewport widths. Percentage-based coordinates scale with the element. But if your element changes aspect ratio at a breakpoint, the clip shape distorts. Test inside your actual layout, not in the generator preview.

Took me a while to figure out that generator previews use square canvases by default. Paste the value onto a wide landscape image and the shape shifts. Always validate in context.

What Shapes Can You Create With CSS Clip-Path?

clip-path is not limited to basic geometry. The polygon coordinate system supports any closed shape you can define with points, and the path() function extends that to curves and arcs.

Polygon-based shapes

Any closed shape with straight edges is a polygon candidate. Common ones built with polygon():

Triangle: 3 points
Arrow/chevron: 6-7 points with a notch on one side
Hexagon: 6 points at 60-degree intervals
Pentagon: 5 points
Diagonal section: 4 points with one edge angled, common in landing page hero sections

Star shapes need 10 points, alternating between outer radius coordinates and inner radius coordinates. Clippy includes a star preset so you don't build this from scratch.

Geometric shapes with circle() and ellipse()

circle(50% at 50% 50%) is the most-used single line in most clip-path generators. It crops any element into a circle. Works on images, divs, buttons, videos.

ellipse() adds independent x/y radius control. Use it for soft oval crops on hero image sections or when a perfect circle would distort a wide-format image. Both shapes stay proportional at any size when using percentage values.

path() for complex custom shapes

path() accepts raw SVG path commands, including curves, arcs, and bezier segments. It unlocks shapes no polygon can replicate: speech bubbles with curved edges, organic blobs, wave-cut section dividers.

The tradeoff is significant. Path data uses fixed pixel units, so the shape does not scale with the element (LambdaTest, 2025). For a static decorative element at a fixed size, fine. For a responsive image crop or an animated shape, use polygon() or the newer shape() function instead. Generator support for path() is limited. Most tools only cover the 4 core shape functions.

How Does CSS Clip-Path Affect Responsive Design?

Clip-path and responsive layouts interact in 3 specific ways that break things if you're not paying attention. The good news: all 3 are avoidable.

Percentage coordinates vs. fixed pixel coordinates

Coordinate type	Behavior on resize	Use case
Percentage (e.g. `50% 100%`)	Scales with element dimensions	Responsive layouts, fluid images
Fixed pixel (e.g. `200px 400px`)	Stays fixed, breaks on mobile	Static decorative elements only

All major generators default to percentage output. Check this before copying. A generator misconfigured to pixels will produce clips that break at every breakpoint.

Aspect ratio changes and shape distortion

This is the tricky one. Percentage coordinates are relative to the element's width AND height independently. If your element goes from a 16:9 ratio on desktop to a 4:3 ratio on mobile, the same polygon() coordinates produce a visually different shape.

The clip coordinates haven't changed. The element's aspect ratio has. And the shape distorts as a result.

Fix: test your clip values at every breakpoint where the element changes aspect ratio. Use media queries to swap clip-path values at those breakpoints if needed.

CSS custom properties for dynamic clips

CSS custom properties work inside clip-path values. This opens up breakpoint-driven clip adjustments without duplicating the full polygon declaration.

:root { --clip-angle: 85%; }
@media (max-width: 768px) { :root { --clip-angle: 92%; } }
.hero { clip-path: polygon(0 0, 100% 0, 100% var(--clip-angle), 0 100%); }

One polygon declaration. The angle adjusts at the breakpoint via the custom property. Clean, maintainable, and easier to debug than duplicate clip-path declarations in each media query.

How Do You Animate CSS Clip-Path?

clip-path is animatable. But it has 1 strict rule that breaks most first attempts: both animation states must use the same shape function with the same number of points.

Polygon-to-polygon with matching point counts interpolates smoothly. Polygon-to-circle does not. The browser has no way to interpolate between a 6-point polygon and a 2-value circle, so it skips directly between states with no transition.

CSS transition implementation

The standard pattern:

.element {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.4s ease;
}
.element:hover {
clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}

4 points in the default state, 4 points in the hover state. Same function, same count. The transition fires smoothly on hover.

Using CSS keyframes instead of transitions gives you more control over easing and multi-step sequences. The same point-count rule applies to every keyframe pair.

Performance behavior of animated clip-path

Animating clip-path forces full geometry recalculation per frame (AI Unchained, 2026). On hardware-accelerated devices this is fast. On low-powered devices or software renderers, it can consume significant CPU.

3 rules for performant clip-path animation:

Keep polygon point counts low (under 8 points for animated shapes)
Use circle() or ellipse() where possible, they are cheaper to calculate than complex polygons
Add will-change: clip-path to hint GPU compositing for the element before animation begins

The Chromium team has been working on hardware-accelerating clip-path by default alongside background-color (Chrome for Developers, 2021). In current Chrome and Edge builds, simple clip animations already benefit from compositor-layer optimization. Complex polygon() animations with many vertices still fall to software rendering on some devices.

Coveloping for animation output

Coveloping is the only generator that produces both keyframe states simultaneously. Define your start clip, define your end clip, and it outputs a matched-point-count @keyframes block ready to paste. See the CSS animation generator options for related tooling covering other animatable CSS properties.

The CSS keyframe animation generator on WPDean handles broader animation sequences if you need more than clip-path transitions.

What Is the Browser Support for CSS Clip-Path?

clip-path on HTML elements carries a cross-browser compatibility score of 92 out of 100 across all major browsers (LambdaTest, 2025). That is a practical green light for production use in almost every project.

The main split is between basic shapes and the newer path() and shape() functions. Basic shapes work everywhere. The newer functions have gaps.

Browser	Basic shapes	path()	shape()
Chrome 55+	Full support	Chrome 88+	Chrome 133+
Firefox 54+	Full support	Firefox 97+	Not supported
Safari 14+	Full support	Safari 13.1+	Safari 18.4+
Edge 79+	Full support	Edge 88+	Edge 133+

The -webkit- prefix situation

Safari versions 6.1 through 13 only accept -webkit-clip-path, not the unprefixed property (LambdaTest, 2025). Safari 14 on macOS Big Sur and iOS 14 dropped the requirement.

Safe pattern for any production stylesheet:

.element {
-webkit-clip-path: circle(50% at center);
clip-path: circle(50% at center);
}

CSS Portal auto-outputs both declarations. Clippy does not. Worth knowing before you pick a generator for a project targeting older Apple devices.

What about Internet Explorer?

IE 11 has zero support for clip-path on HTML elements. Full stop.

If your analytics still show meaningful IE traffic, add a fallback that keeps the element visible without the clip. A plain background-color or border-radius keeps the layout intact. Cross-browser compatibility planning for clip-path basically comes down to: Safari prefix coverage + IE fallback. That is the whole checklist.

The path() and shape() function gap

Firefox does not support shape() at all as of mid-2025 (web.dev, 2025). That is the biggest current gap in the function ecosystem.

shape() is the responsive answer to path(), accepting CSS units and percentages instead of raw pixels. Chrome 133+ and Safari 18.4+ support it. Firefox is still out.

For complex organic shapes that need responsiveness, the current workaround is SVG via the url() reference combined with an inline <clipPath> element. Supported in all browsers that support SVG. More markup, but reliable.

How Does CSS Clip-Path Compare to CSS Masking?

The W3C CSS Masking specification states it directly: clipping paths can perform better and basic shapes are easier to interpolate (W3C, 2021). Masking gives more visual possibilities. Clipping is faster and simpler to work with.

The core difference is this: clip-path uses geometry. mask uses image alpha or luminance values. Those are fundamentally different rendering operations.

Feature	clip-path	CSS mask
Transparency	Binary (in or out)	Partial (gradient fade possible)
Input type	Geometric shape functions	Image, SVG, or gradient
Animation	Smooth (matching shapes)	Limited interpolation support
Generator tools	Many (Clippy, Firefox DevTools)	Few, limited support

When clip-path wins

Use clip-path when: you need a hard-edge shape, you need the shape to animate, or you want the simplest possible implementation. Clipping is the correct choice for the vast majority of geometric shape needs in web UI.

The CSS Mask Generator handles masking use cases if you do need soft-edge transparency effects. Both properties exist in the same toolkit, they just solve different problems.

When masking wins

Masking is the right call in 3 specific situations.

Soft fade-out edge on an image (gradient mask)
Image-shaped cutout using a photo or texture as the mask source
Luminance-based visibility where white is opaque and black is transparent

None of those are achievable with clip-path alone. CSS masking became Baseline Newly Available in 2024, with most features accessible in earlier browser versions using the -webkit-mask-image prefix (web.dev, 2024).

The pointer events difference

Clipped areas do not accept pointer events. A clipped triangle from a div stops registering hover and click events in the clipped-away corners (SitePoint, 2024). This is actually useful for non-rectangular interactive elements but catches developers off guard when they expect full-area interaction on a visually clipped element.

Masked elements behave differently. The original rectangular bounding box still receives pointer events regardless of what the mask hides visually.

What Are the Common Errors When Using CSS Clip-Path?

Most clip-path bugs fall into the same 5 categories. Every one of them has a direct fix.

Missing -webkit- prefix on Safari

The single most common production bug. Safari versions below 14 silently ignore unprefixed clip-path and render the element as a full rectangle instead.

Fix: always include both declarations in your stylesheet. CSS Portal outputs both by default. If you use Clippy, add the prefix manually.

LambdaTest data confirms partial support stretches from Safari 7.1 through 26.3 across iOS and macOS when using the prefixed property. That is a large installed base still worth covering.

Polygon point count mismatch in animations

The second most common bug. When you animate between two polygon() states with different vertex counts, the browser skips interpolation and jumps instantly at the 50% mark.

Debugging signal: if your clip transition looks like a hard snap rather than a smooth morph, count the polygon points in both keyframes. They must match exactly.

Fix: add extra zero-movement points to the simpler shape until counts match. Coveloping handles this automatically when generating paired keyframes.

box-shadow disappears after clipping

clip-path literally cuts the element, including any shadows rendered outside its bounding box. A box-shadow added to a clipped polygon simply gets snipped off (DEV Community, 2025).

Fix: replace box-shadow with filter: drop-shadow() applied to the parent container. Drop-shadow follows the actual painted shape of the element, not its rectangular box. It produces a shadow that traces the polygon edge correctly.

overflow: hidden conflict

Applying both clip-path and overflow: hidden to the same element creates unexpected visual stacking behavior, especially with child elements that have z-index set.

The cause: clip-path creates a new stacking context. Any value other than none promotes the element into its own stacking context, which can break z-index ordering against sibling elements (LambdaTest, 2025).

Fixed pixel coordinates from a misconfigured generator

Check your generator settings before copying. Some tools default to pixel output rather than percentages. Fixed values look fine in the generator preview, which uses a fixed-size canvas.

Paste that same value onto a fluid-width element and the clip shape stays the same size while the element grows. The result is a cropped element that breaks at every breakpoint where the container width changes.

How Do You Use CSS Clip-Path on Images and Videos?

clip-path applies directly to <img> and <video> tags with no wrapper element required. The clipping region works on the rendered media, not on a container div.

Most practical image and video applications combine clip-path with object-fit: cover so the media fills the clipped shape without distortion.

Clipping images with object-fit

The standard pattern:

img {
width: 300px;
height: 300px;
object-fit: cover;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

object-fit: cover fills the 300x300 box with the image scaled to cover it fully. Then clip-path cuts that box to a triangle. The image content stays centered and undistorted inside the clipped shape.

Without object-fit: cover, the image stretches to its container dimensions and the clipped shape reveals a stretched version of the image. Looks wrong on any non-square image.

Clipping video elements

Video playback continues inside a clipped region. The <video> element renders within the clip boundary and the video plays normally. Controls remain accessible if inside the clip region.

Practical use cases:

Diagonal video backgrounds on hero sections
Circle-cropped video thumbnails for user-generated content feeds
Polygon-shaped video cards in media galleries

Keep polygon point counts low for video elements. Animating a clip-path on a playing video element is GPU-intensive. Complex polygon shapes on auto-playing background videos have caused visible frame drops on lower-powered devices.

Using clip-path on the picture element

The <picture> element works with clip-path for art-directed responsive image shapes. Apply the clip to the <img> child inside <picture>, not to the <picture> wrapper itself.

Combine with media queries to swap <source> elements at breakpoints and swap clip-path values simultaneously. The image source and its shape both adapt to the viewport. This pattern is useful for editorial layouts where the same image serves different crops at different breakpoints. For more advanced SVG-based clipping alternatives, the guides on using SVG in HTML and animating SVG with CSS cover the overlap between SVG clip paths and CSS clip-path approaches.

Related tools that pair well with clip-path workflows: the SVG waves generator for section dividers, the CSS gradient generator for fills inside clipped shapes, and the CSS glassmorphism generator for frosted glass effects combined with polygon clips.

FAQ on CSS Clip-Path Generators

What is a CSS clip-path generator?

A CSS clip-path generator is a visual editor that produces ready-to-use clip-path property values. You drag points on a canvas and copy the output. No manual coordinate writing required.

What shape functions does clip-path support?

The clip-path property supports four core shape functions: polygon(), circle(), ellipse(), and inset(). The path() function also exists for SVG-style commands, though it uses fixed pixel units.

Is clip-path supported in all browsers?

Basic shapes work in all modern browsers including Chrome 55+, Firefox 54+, Edge 79+, and Safari 14+. The overall cross-browser compatibility score sits at 92 out of 100 (LambdaTest, 2025).

Do I need the -webkit- prefix for clip-path?

Yes, for Safari versions 6.1 through 13. Always pair -webkit-clip-path with the unprefixed declaration. Safari 14+ on macOS and iOS dropped the prefix requirement entirely.

Can you animate CSS clip-path?

Yes. Both animation states must use the same shape function with identical polygon point counts. Mismatched counts cause an instant snap instead of a smooth transition. Use transition: clip-path 0.4s ease for hover effects.

Does clip-path work on images and videos?

It applies directly to <img> and <video> elements. Combine with object-fit: cover to keep media proportional inside the clipped region. Video playback continues normally within the clipping boundary.

Why does my box-shadow disappear with clip-path?

clip-path cuts the element including any shadows rendered outside its box. Replace box-shadow with filter: drop-shadow() on the parent container. Drop-shadow follows the actual clipped shape, not the rectangular bounding box.

What is the difference between clip-path and CSS masking?

clip-path uses geometric shapes and produces binary visibility: a pixel is fully visible or fully hidden. CSS mask uses image alpha channels and supports partial transparency and gradient fades. Clipping performs better and interpolates more easily.

Are percentage coordinates responsive?

Yes. Percentage-based polygon coordinates scale with the element's bounding box. Fixed pixel values do not scale and break on smaller viewports. All major generators default to percentage output. Always verify before copying.

Which clip-path generator is best?

Clippy by Bennett Feely is the most widely used, with 24 shape presets and drag-and-drop polygon editing. For animation output, Coveloping generates matched-point-count keyframe pairs. Firefox DevTools includes a built-in editor for live in-browser editing.