What shapes does clip-path support?

CSS clip-path supports: circle() for circles, ellipse() for ellipses, polygon() for any multi-sided shape defined by vertices, inset() for rectangular clips with optional rounded corners, and path() for arbitrary SVG paths. Polygon is the most flexible, as you can define as many vertices as needed.

Does clip-path affect layout and click areas?

Clip-path affects what is visible but also affects pointer events — clicks outside the clip region do not register. However, the element's layout box (used for positioning other elements) remains the full original size. This means invisible clipped areas still take up space in the layout flow.

What is the difference between clip-path and mask in CSS?

clip-path uses geometric shapes or SVG paths to define a clipping region — everything inside is shown, everything outside is hidden. mask uses an image (or gradient) as an alpha channel, allowing smooth gradual transparency. Masks are more flexible but more expensive; clip-path is simpler and more performant for hard-edged shapes.

CSS Clip Path Generator

Build clip-path shapes visually. Drag vertices, pick presets, and copy the CSS.

Drag the white dots to move vertices

Generated CSS

clip-path: none;

Drag the vertices or adjust sliders to build your clip-path shape.

How to Use the Clip Path Generator

Choose a shape type — Polygon for custom multi-point shapes, Circle for perfect circles, Ellipse for ovals, or Inset for rectangular clips. Use Presets for instant common shapes.
Edit the shape — In Polygon mode, drag the white dots on the preview to move vertices. Use "Add Vertex" to add more points. In other modes, use the sliders.
Apply a preset — Click any preset shape to load its polygon coordinates instantly.
Copy the CSS — Click Copy to grab the clip-path declaration, or Download to save it as a .css file.

Understanding CSS clip-path

The clip-path property clips an element to a defined shape. Anything outside the shape is invisible, while anything inside is fully visible. Unlike overflow: hidden which clips to the element's rectangular bounds, clip-path can use any geometric shape, creating triangles, arrows, hexagons, stars, and smooth curves.

Shape Types

polygon() — The most flexible type. Define any number of vertex points as percentage or pixel coordinates. Used for triangles, arrows, stars, chevrons, and custom brand shapes.
circle(radius at x y) — Clips to a circle. The radius can be a length or percentage; the center position defaults to 50% 50%.
ellipse(rx ry at x y) — Like circle but with separate horizontal and vertical radii. Useful for oval hero section decorations.
inset(top right bottom left round radius) — A rectangular clip inset from the element's edges. The optional round keyword adds corner rounding to the inset rectangle.
path() — An SVG path string for completely arbitrary shapes including curves, arcs, and complex paths.

Polygon Coordinate System

Polygon coordinates are measured from the top-left corner of the element. Using percentages (recommended) makes the shape responsive — it scales with the element. Using pixel values creates a fixed shape that does not scale. For a triangle pointing up: polygon(50% 0%, 0% 100%, 100% 100%). For a hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%).

Animating clip-path

You can animate between two polygon shapes as long as they have the same number of vertices. This creates smooth morphing transitions: transition: clip-path 0.4s ease;. Add a :hover rule with a different polygon to create interactive shape morphs. For star-to-circle effects, use the same number of points in both shapes. Combine with the CSS Animation Generator for keyframe-based clip-path morphing.

Clip-path and Accessibility

Because clip-path hides the clipped portions visually, be careful with text and interactive content. Screen readers can still read text inside a clipped element even if it is not visible. Pointer events are also disabled in clipped regions, so buttons or links outside the clip shape are not clickable. Always test clipped interactive elements across devices. For pure decorative shapes, clip-path is ideal. For content masking, consider whether a mask or overflow approach better serves your use case. Explore more CSS design tools like the Filter Playground or the Border Radius Generator.

Frequently Asked Questions

CSS clip-path masks an element to a defined shape, hiding parts outside the clipping region. Unlike border-radius which only rounds corners, clip-path can create any shape: triangles, hexagons, arrows, stars, and custom polygons. The clipped area is hidden but the element's layout space is preserved.

CSS clip-path supports: circle() for circles, ellipse() for ellipses, polygon() for any multi-sided shape, inset() for rectangular clips with optional rounded corners, and path() for arbitrary SVG paths. Polygon is the most flexible for custom shapes.

Clip-path affects what is visible and also affects pointer events — clicks outside the clip region do not register. However, the element's layout box remains the full original size, so invisible clipped areas still take up space in the layout flow.

Yes. clip-path is animatable as long as both the start and end states use the same shape type with the same number of vertices. Animating between two polygon() shapes with the same vertex count creates a smooth morph effect.

clip-path uses geometric shapes to define a clipping region — everything inside is shown, everything outside is hidden. mask uses an image as an alpha channel, allowing smooth gradual transparency. Masks are more flexible but more expensive; clip-path is simpler and more performant for hard-edged shapes.