Skip to main content
SlapMyWeb
Get started
Skip to tool
CSS & Design tools/All tools
Free tool

CSS clip-path generator

Build CSS clip-path shapes visually. Choose polygon, circle, ellipse or inset, adjust coordinates with sliders, preview live, and copy production-ready CSS.

P1
P2
P3
css
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

What is CSS Clip-Path Generator?

A CSS clip-path generator is a visual design tool that helps you create clipping masks for HTML elements without writing code by hand. The CSS clip-path property defines a clipping region that determines which parts of an element are visible and which are hidden. Everything inside the clip path is shown, everything outside is invisible. This tool supports all four CSS clip-path shape functions: polygon for complex multi-point shapes, circle for circular clips, ellipse for oval clips, and inset for rectangular clips with optional rounded corners. Polygon mode lets you define up to 20 coordinate points to create any shape imaginable — triangles, stars, arrows, hexagons, custom silhouettes, and more. Each point is positioned using percentage-based X and Y coordinates, making the shape responsive by default. Circle and ellipse modes let you control the radius and center position. Inset mode lets you crop from each edge independently with optional border-radius rounding. The live preview shows your shape rendered against a gradient background with a subtle checkerboard pattern behind the clipped-away areas, so you can see exactly what will be visible. All processing runs entirely in your browser with zero server interaction.

How to Use CSS Clip-Path Generator

  1. 1

    Choose a shape type

    Select polygon, circle, ellipse, or inset. Polygon is the most versatile — it lets you define custom shapes with any number of points. Circle and ellipse are great for simple rounded clips. Inset creates rectangular cutouts with optional border-radius.

  2. 2

    Adjust the shape

    For polygons, use the X and Y sliders or type exact percentage values for each point. Add or remove points as needed. For circles and ellipses, adjust the radius and center position. For inset, set how much to crop from each edge. The live preview updates instantly.

  3. 3

    Use presets or copy CSS

    Click any of the 12 polygon presets (triangle, star, hexagon, etc.) to load common shapes as a starting point, then customize. When your shape looks right, click Copy CSS to get the clip-path property ready to paste into your stylesheet.

Features

  • Polygon, circle, ellipse, and inset clip-path shape support
  • Up to 20 polygon points with individual X/Y coordinate sliders and numeric inputs
  • Live shape preview with gradient fill and checkerboard background for clipped areas
  • Twelve built-in polygon presets: triangle, pentagon, hexagon, star, arrow, chevron, cross, message bubble, diamond, trapezoid, parallelogram, octagon
  • Circle mode with radius and center position controls
  • Ellipse mode with independent X/Y radius and center position controls
  • Inset mode with per-edge cropping and optional border-radius
  • Copy production-ready CSS clip-path property with one click
  • Percentage-based coordinates for fully responsive shapes
  • Zero server calls — all rendering happens in your browser

Related Tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

Open tool

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

Open tool

CSS Border Radius Generator

Design custom border-radius shapes with independent corner controls and live preview.

Open tool

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

Open tool

CSS Grid Generator

Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.

Open tool

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

Open tool
See all CSS & Design tools

Frequently Asked Questions

What is CSS clip-path and when should I use it?+
CSS clip-path defines a clipping region that controls which parts of an element are visible. Use it to create non-rectangular layouts, decorative section dividers, shaped image frames, hover reveal effects, or creative card designs. It works on any HTML element including images, divs, videos, and text containers.
What is the difference between polygon, circle, ellipse, and inset?+
Polygon defines a shape using a series of X/Y coordinate points connected by straight lines — it can create any shape from triangles to complex silhouettes. Circle creates a circular clipping region with a radius and center point. Ellipse is like circle but with independent horizontal and vertical radii for oval shapes. Inset creates a rectangular clip by cropping a specified amount from each edge, with optional border-radius for rounded rectangles.
Are clip-path shapes responsive?+
Yes. This tool uses percentage-based coordinates, which means the shape scales proportionally with the element size. A polygon point at 50% 50% will always be at the center regardless of the element dimensions. This makes clip-path ideal for responsive layouts.
Is CSS clip-path supported in all browsers?+
CSS clip-path with basic shapes (polygon, circle, ellipse, inset) is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Safari versions before 14 required the -webkit-clip-path prefix, but modern Safari supports the unprefixed version. The generated CSS uses the standard unprefixed syntax.
Can I animate clip-path shapes?+
Yes, CSS clip-path can be animated with CSS transitions or animations as long as the starting and ending shapes have the same number of points (for polygons) or use the same shape function. You can create reveal effects, morphing shapes, and hover transitions. Copy the clip-path values from this tool for both states and add a CSS transition.
How do I create a diagonal section divider?+
Use a polygon with 4 points. Set the top-left to 0% 0%, top-right to 100% 0%, bottom-right to 100% 100%, and bottom-left to 0% 80%. This creates a section with an angled bottom edge. Adjust the percentages to control the angle steepness.