What shapes are supported?

Polygon (any vertices), circle, ellipse, inset (rectangles with optional rounded corners), and path() for SVG-style shapes.

Can I create complex shapes?

Yes — drag vertices visually or enter precise coordinates. For ornate shapes use path() with SVG syntax; the tool validates the path.

All modern browsers for polygon, circle, ellipse, inset. path() is more recent (Chrome 88+, Firefox 97+, Safari 15.4+) — check against your support matrix.

clip-path values can be transitioned between compatible shapes (polygon↔polygon with same vertex count). The tool has animation examples.

CSS Clip-Path Builder | DevTools Surf

DevTools Surf

Example: CSS Clip-Path Builder

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

hexagon

Output

.element {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Shape: hexagon */
/* clip-path is supported in every current browser; the -webkit- prefix only matters for Safari below 14. */
/* Clipped areas stop receiving pointer events, so keep interactive content inside the shape. */

About CSS Clip-Path Builder

CSS Clip-Path Builder preview - Web / Frontend tool

Generate CSS clip-path polygon values. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

Frontend developers creating non-rectangular section dividers
Designers building diagonal hero sections and geometric layouts
UI engineers implementing custom avatar shapes for user profiles
Creative developers building interactive shape-based navigation

Tips

Start with preset shapes like circles and triangles to learn
Use percentage values for responsive clip paths
Combine clip-path with transitions for reveal animations

Fun Facts

CSS clip-path evolved from the SVG clipPath element — the CSS property was first specified in the CSS Masking Module Level 1 draft in 2012.
The polygon() function in clip-path can accept any number of points, enabling complex shapes — some developers have created entire illustrations using only clip-path polygons.
Before clip-path, developers used the deprecated CSS clip property (from CSS 2.1, 1998), which only supported rectangular clipping regions.

FAQ

What shapes are supported?: Polygon (any vertices), circle, ellipse, inset (rectangles with optional rounded corners), and path() for SVG-style shapes.
Can I create complex shapes?: Yes — drag vertices visually or enter precise coordinates. For ornate shapes use path() with SVG syntax; the tool validates the path.
Browser support?: All modern browsers for polygon, circle, ellipse, inset. path() is more recent (Chrome 88+, Firefox 97+, Safari 15.4+) — check against your support matrix.
Does it animate?: clip-path values can be transitioned between compatible shapes (polygon↔polygon with same vertex count). The tool has animation examples.

Related Web / Frontend Tools

Meta Tags / OG Previewer Tailwind → CSS HTML → React JSX HTML → Markdown SVG → React Component CSS Unit Converter robots.txt Validator Sitemap XML Validator