DevBolt
Processed in your browser. Your data never leaves your device.

How do I create custom CSS clip-path shapes?

Select a shape type (circle, ellipse, inset, or polygon), then adjust the visual controls to design your clip-path. For polygons, drag the points directly on the preview or choose from 13 presets including triangle, star, hexagon, arrow, cross, and more. The generator outputs production-ready CSS that you can copy with one click. Add the -webkit- prefix for older Safari support. Everything runs in your browser — no signup required.

Generate circle clip-path
Input
Shape: Circle
Radius: 50%
Center: 50% 50%
Output
clip-path: circle(50% at 50% 50%);
-webkit-clip-path:
  circle(50% at 50% 50%);
← Back to Tools

CSS Clip-path Generator

Create CSS clip-path shapes visually — circle, ellipse, inset, or polygon with draggable points. Copy production-ready CSS.

Polygon Points (3)

Drag points on the preview or edit values below.

1%%
2%%
3%%

Shape Presets

Preview Colors

#6366f1
#1f2937

Preview

CSS Output

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Ctrl+Enter to copy CSS

Clip-path Reference

circle(r at cx cy) — circular clip
ellipse(rx ry at cx cy) — elliptical clip
inset(t r b l round br) — rectangular clip with optional rounding
polygon(x1 y1, x2 y2, ...) — arbitrary polygon with unlimited vertices

Supported in all modern browsers. Use -webkit-clip-path for older Safari versions.

Tips & Best Practices

Pro Tip

Use clip-path for reveal animations instead of overflow: hidden

clip-path can be animated with CSS transitions for smooth reveal effects: transition from `circle(0%)` to `circle(100%)` for a circular reveal, or `inset(0 100% 0 0)` to `inset(0)` for a horizontal wipe. These are GPU-accelerated and performant.

Common Pitfall

clip-path clips everything including box-shadow and outline

Elements with clip-path lose their box-shadow and outline because those are rendered outside the clipping region. Use filter: drop-shadow() instead of box-shadow for clipped elements — drop-shadow follows the clip-path shape.

Real-World Example

Create custom shaped sections with polygon clip-path

Angled section dividers (diagonal cuts between page sections) use `clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)`. This creates a clean diagonal edge without SVG or pseudo-elements, and the angle is easily adjustable.

Security Note

clip-path hides content visually but not from screen readers or DOM

Clipped content is invisible but still present in the DOM and accessible to screen readers, search engines, and JavaScript. Never use clip-path to 'hide' sensitive information — use server-side rendering control instead.

Frequently Asked Questions

What is the CSS clip-path property?
The clip-path CSS property clips an element to a defined shape, hiding everything outside that shape. It supports four basic shape functions: circle(), ellipse(), inset() (rectangles with optional rounding), and polygon() (arbitrary shapes with any number of vertices). Unlike overflow: hidden which only clips to the element's box, clip-path can create non-rectangular visible areas like triangles, stars, and custom polygons.
How do I create a triangle with clip-path?
Use polygon() with three coordinate pairs: clip-path: polygon(50% 0%, 0% 100%, 100% 100%). The first value in each pair is the X position (left to right) and the second is the Y position (top to bottom), both as percentages of the element's dimensions. Adjust the coordinates to change the triangle's shape — for example, polygon(0% 0%, 100% 50%, 0% 100%) creates a right-pointing arrow triangle.
Does clip-path affect layout and click events?
Clip-path only changes the visible area — it does not affect the element's box model or layout. The element still occupies its full rectangular space in the document flow. However, by default pointer events (clicks, hovers) still fire on the clipped-away areas. To restrict interaction to the visible shape, add pointer-events: none to the clipped element and handle events on a child, or use the clip-path on a wrapper.
Is clip-path supported in all browsers?
Yes, clip-path with basic shapes (circle, ellipse, inset, polygon) is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Safari versions before 13.1 require the -webkit-clip-path prefix. The url() function referencing SVG clipPath elements has broader legacy support. For older browsers, you can use the -webkit- prefix version as a fallback — this generator provides a copy option with the prefix included.

Related Generate Tools

GQL

JSON to GraphQL Schema

Generate GraphQL schema definitions from JSON data with automatic type inference, Query/Mutation generation, and .graphql download

HTTP

HTTP Request Builder

Build HTTP requests visually and generate code in cURL, JavaScript, Python, Go, Rust, and PHP — lightweight Postman/ReqBin alternative

TBL

HTML Table Generator

Build HTML tables visually with an interactive editor — add rows, columns, header rows, captions, and styling. Export as plain HTML, inline CSS, or Tailwind classes

FX

CSS Filter Generator

Build CSS filter effects visually — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow with 12 presets and live preview