// draw and export CSS clip-path shapes visually
Draw polygon, circle, ellipse, and inset clip-paths on a live canvas. Drag handles, apply to images or shapes, copy CSS instantly — browser-based, free, no sign-up.
Select Polygon to draw a custom shape, or choose Circle, Ellipse, or Inset for parametric shapes controlled by sliders.
In polygon mode, click the canvas to add points or drag existing handles. Use the preset buttons to start from a triangle, arrow, star, or other common shape.
The CSS output updates in real time. Copy the clip-path property and paste it directly into your stylesheet.
CSS Clip Path Generator is a visual editor for the clip-path CSS property. Draw polygons by placing and dragging points on a live canvas, or configure circle, ellipse, and inset shapes with sliders. The generated CSS applies instantly to the preview and copies with one click — free and browser-based.
The clip-path CSS property clips an element to a defined shape. Only the portion of the element inside the clipping region is visible; everything outside is hidden. It works on any HTML element including images, divs, and text containers, and supports animation for morphing shape transitions.
polygon() defines an arbitrary shape using a list of X Y coordinate pairs. circle() clips to a circle defined by radius and centre. ellipse() clips to an ellipse with independent horizontal and vertical radii. inset() clips to a rectangle inset from the element edges with optional rounded corners. path() accepts an SVG path string for arbitrary curves.
Percentage coordinates are relative to the element's dimensions, so the shape scales correctly if the element resizes — making them ideal for responsive layouts. Pixel coordinates produce a fixed-size shape regardless of the element size, which is appropriate when you need a specific pixel dimension that should not change with the layout.
Yes, as long as both shapes are the same type and have the same number of points. You can transition between two polygon() shapes using CSS transition or @keyframes, creating a morphing effect. This technique is commonly used for hover effects and section divider animations.
clip-path clips the entire element including its box-shadow. To add a shadow to a clipped element, apply a filter: drop-shadow() to a wrapper element instead. The drop-shadow filter follows the visible silhouette of the clipped element rather than the box edges.
The inset(top right bottom left) function creates a rectangular clipping region offset inward from each edge of the element. It optionally accepts a round keyword followed by a border-radius value to create rounded rectangle clips. This is the most common clip-path for content reveal animations and card hover effects.
The clip-path CSS property is one of the most powerful tools for creating visually distinctive web layouts without images or SVG files. By clipping elements to custom shapes — triangles for diagonal section breaks, hexagons for image grids, arrows for directional UI, circles for profile images — designers can produce sophisticated visual effects with pure CSS. The challenge is that writing polygon coordinates by hand is tedious and error-prone. This generator solves that by making the process entirely visual.
The polygon() function is the most flexible, accepting any number of X Y coordinate pairs to define an arbitrary closed shape. Coordinates can be absolute pixel values or percentages relative to the element size. The circle() function accepts a radius and an optional centre position, clipping the element to a perfect circle. The ellipse() function works similarly but accepts separate horizontal and vertical radii for oval clips. The inset() function clips to a rectangle defined by four edge offsets, with an optional round value for rounded corners.
The most common polygon clip-paths are triangles (three points), arrows and chevrons (five to seven points), parallelograms (four points with offset horizontals), hexagons (six points), and trapezoids (four points with top narrower than bottom). These shapes are used for section dividers that create the appearance of overlapping layers, card components with directional indicators, and image containers that break out of the standard rectangular grid.
One of the most popular uses of clip-path is creating diagonal transitions between page sections. Applying a polygon with a slight diagonal on the bottom edge of a coloured section creates a seamless visual overlap with the next section. Common values are polygon(0 0, 100% 0, 100% 85%, 0 100%) for a rising diagonal and polygon(0 0, 100% 0, 100% 100%, 0 85%) for a falling one.
Content clipped by clip-path remains in the DOM and is accessible to screen readers, even though it is visually hidden. This means text inside a clipped element is still read by assistive technologies. Be careful not to clip interactive elements like buttons or links such that their click target area is reduced to the visible portion — the hit area follows the element's box model, not the clip shape.