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. polygon supports round <length-percentage> in modern browsers.

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.

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