CSS Clip-Path Generator

Generate CSS clip-path shapes visually. Choose from circle, ellipse, triangle, diamond, hexagon, arrow, star and more. Copy CSS instantly. Free tool.

Shape

CSS Output


      

    

  

  








  
About the CSS Clip-Path Generator

  

    The CSS Clip-Path Generator lets you create complex CSS clip-path shapes visually with an interactive live preview. Choose from 10 preset shapes  -  including circles, ellipses, polygons, stars, and arrows  -  adjust parameters with sliders, and copy the ready-to-paste CSS property instantly. It eliminates the need to calculate polygon coordinates by hand.
  

  
Common use cases

  




  
Frequently Asked Questions

  

    

      What is CSS clip-path and how does it work?
      
The CSS clip-path property clips (hides) parts of an element, displaying only the region defined by a geometric shape. Shapes can be defined as basic shapes (circle(), ellipse(), polygon()), SVG paths, or element references. Everything outside the clipping region becomes invisible. Unlike border-radius which only rounds corners, clip-path can create any arbitrary shape including triangles, hexagons, stars, and complex polygons. The clipped area is not interactive  -  mouse events outside the visible shape are ignored.

    

    

      How do I generate a CSS clip-path polygon for a custom shape?
      
Select a shape from the buttons above (Circle, Triangle, Diamond, Hexagon, etc.), adjust the sliders to customise the shape, and the CSS property is generated and updated live in the output panel. Click Copy to get the ready-to-paste CSS. Polygon shapes use percentage coordinates so they scale correctly with the element's dimensions  -  for example clip-path: polygon(50% 0%, 0% 100%, 100% 100%) creates a triangle that fits any size element.

    

    

      Can I animate CSS clip-path for reveal effects?
      
Yes  -  clip-path is fully animatable with CSS transitions and animations, but only between shapes of the same type and same number of points. To animate a circle expanding from nothing: start with clip-path: circle(0% at center) and transition to clip-path: circle(75% at center). For polygon transitions, both the start and end must have the same number of vertices  -  so you can morph between a triangle and a star by ensuring both polygons have the same point count. GPU-accelerated and performant, it's one of the best properties for scroll-triggered reveal animations.

    

    

      Is clip-path supported in all browsers?
      
clip-path with basic shapes and polygon paths is supported in all modern browsers  -  Chrome, Firefox, Safari, and Edge  -  covering over 95% of global browser usage. Safari requires the -webkit-clip-path prefix for some shapes, but this has been mostly resolved in recent Safari versions. Internet Explorer 11 does not support clip-path at all; however, as IE11 has less than 0.5% global market share, it can safely be ignored for most projects. Always verify with a live preview before shipping.

    

    

      What is the difference between clip-path and SVG masking?
      
clip-path defines a hard-edged clipping region  -  pixels are either fully visible or fully hidden. CSS masking (mask-image) uses an image or SVG element where pixel transparency controls the mask opacity, allowing soft edges, gradients, and partial transparency. For simple geometric shapes like circles, hexagons and polygons, clip-path is simpler and more performant. For complex image-based masks with soft edges, use mask-image with an SVG or PNG mask. Both properties are GPU-accelerated in modern browsers.