Clip Path Maker

Visually create CSS clip-path polygons, circles, and ellipses with draggable handles. Export clean CSS code with modern harmonized UI.

CSS Clip-Path Maker

Create custom clip-path shapes visually with polygon, circle, and ellipse support

🔷 Shape

Canvas

grid step

Export

clip-path: polygon();
-webkit-clip-path: polygon();
preview

📍 Points

#x (%)y (%)actions

tips: drag points, use arrows to nudge (hold Shift = ×10), Delete removes selected. Roundness is written as polygon(round r%, ...) in the CSS; the preview shows the sharp polygon because browsers are still adopting it.

Free CSS Clip-Path Generator

The clip-path CSS property defines a clipping region on any HTML element. Only the part inside the region is visible; everything outside is hidden. Unlike overflow: hidden, clip-path supports complex geometric shapes: polygons with any number of points, circles, ellipses, and inset rectangles.

This CSS clip-path generator lets you design shapes visually with a drag-and-drop editor, then copy the ready-to-use CSS code. No manual coordinate math required.

How to use the Clip Path Maker

  1. Choose a shape type: Pick Polygon, Circle, Ellipse, or Inset from the selector.
  2. Start from a preset: Use built-in presets like Triangle, Arrow, Star, Pentagon, or Diamond to start quickly.
  3. Drag the handles: Click and drag the control points on the preview area to refine your shape.
  4. Upload your image: Replace the default preview with your own image to see exactly how the clipping will look.
  5. Copy the CSS: Click Copy CSS and paste the clip-path value directly into your stylesheet.

Polygon, Circle, Ellipse, and Inset

  • Polygon: The most flexible shape. Defined by a list of (x%, y%) coordinate pairs. Use it for triangles, arrows, stars, hexagons, or any custom geometric shape.
  • Circle: Defined by a radius and a center point. Ideal for circular profile pictures, avatar frames, and round UI elements.
  • Ellipse: Like a circle but with separate horizontal and vertical radii, producing oval shapes. Great for pill-shaped cutouts.
  • Inset: A rectangle defined by offsets from each side with optional border-radius. Perfect for rounded-corner clipping without extra elements.

Common use cases

  • Diagonal section dividers: Apply a polygon clip-path to a hero or section background to create a slanted edge between sections.
  • Custom image frames: Clip a photo into a hexagon, star, or arrow shape for unique visual cards and thumbnails.
  • Animated reveals: Animate the clip-path property with CSS transitions for smooth reveal effects on scroll.
  • CSS masks without SVG: Use circle or ellipse clip-path as a lightweight alternative to SVG masks for rounded images.

Browser support

The clip-path property with basic shapes is supported in all modern browsers: Chrome, Firefox, Safari, and Edge. For the widest compatibility, always use percentage-based coordinates rather than pixel values, as percentages scale with the element size.

Why use an online clip-path generator?

Calculating polygon coordinates by hand is tedious and error-prone. This online clip-path maker supports all four CSS shape types, includes a preset library, and lets you preview shapes on your own images. All processing runs 100% in the browser, and no files are ever uploaded to a server.

New to the property? Start from our guide CSS Clip-Path: 10 Copy-Paste Examples with Live Previews, then fine-tune any of those shapes here.

Looking for wavy or curved section dividers instead of straight-edged shapes? Polygons can only approximate curves, so for smooth waves use the SVG Wave Generator. For frosted-glass card effects, try the Glassmorphism Generator.

For motion rather than shape, the CSS animation directory collects keyframe libraries and scroll effect tools, with the abandoned ones already removed.

Frequently Asked Questions

What is CSS clip-path?

clip-path is a CSS property that defines a visible region on an element: everything inside the shape shows, everything outside is hidden. It supports polygons, circles, ellipses, and inset rectangles, making it the standard way to create non-rectangular layouts without images.

What is the difference between clip-path and mask?

clip-path is binary: a pixel is either fully visible or fully hidden, following a geometric shape. mask supports transparency gradients and image-based masking, so edges can fade. For sharp geometric cuts, clip-path is lighter and easier to animate.

Can I animate clip-path?

Yes. clip-path animates smoothly with CSS transitions or keyframes as long as both states have the same shape type and the same number of points. Animating a polygon from one set of coordinates to another is a popular technique for hover reveals and page transitions.

Does clip-path work in all browsers?

Basic shapes (polygon, circle, ellipse, inset) work in all modern browsers: Chrome, Firefox, Safari, and Edge. Use percentage coordinates instead of pixels so the shape scales with the element size across screen widths.

How do I clip an image into a custom shape?

Apply clip-path directly to the img element or its wrapper. In this generator you can upload your own image, drag the polygon points on top of it, and copy the resulting CSS. The image itself never leaves your browser.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolAspect Ratio CalculatorCalculate aspect ratios and pixel dimensions for media and screens.

Free forever, no ads, no tracking. Support the project