The Free Clip-Path Generator

What is CSS clip-path?

clip-path is a CSS property that clips the visible area of an element to a specific shape. Everything outside the clipping region is hidden. It supports geometric shapes like polygon, circle, and ellipse, making it a powerful tool for creative layouts, image masks, and animated transitions.

Unlike border-radius, which only rounds corners, clip-path lets you cut elements into virtually any shape — arrows, stars, hexagons, custom polygons — purely in CSS, with no extra markup or images needed.

/* Pentagon shape */
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

/* Circle, centred */
clip-path: circle(50% at 50% 50%);

/* Ellipse */
clip-path: ellipse(50% 30% at 50% 50%);

How to use this clip-path generator

1. 1

   Choose a shape preset

   Select from pentagon, triangle, arrow, circle, ellipse or square — a solid starting point for the most common clip-path values.

2. 2

   See the live preview

   The coloured preview box updates instantly so you can visualise the shape on a real element before copying.

3. 3

   Copy the CSS

   Hit "Copy CSS" to grab the ready-to-paste clip-path declaration, including the -webkit- fallback written in your JS.

4. 4

   Paste into your project

   Apply the value to any element in your stylesheet. Combine with transitions for smooth shape animations.

Frequently asked questions