CSS Clip-Path Generator

Controls

Preview & CSS

 
   
 
 
   
 
 
 
How to Use
 
     
  1. Choose a shape type — Select polygon, circle, ellipse or inset from the shape selector.
    2.  
  2. Use a preset or drag points — Start from one of the 12 polygon presets (triangle, arrow, star…) or drag handles on the preview to fine-tune.
    3.  
  3. Adjust parameters — For circle/ellipse, set radius and position. For inset, control each side independently.
    4.  
  4. Copy CSS — Click "Copy CSS" to get the ready-to-paste clip-path value.
    5.  
 
 
 
What Is CSS clip-path?
 
CSS clip-path masks an element to a specific shape, hiding everything outside the defined region. The original element space is preserved — only the visible area changes.
 
It supports polygon(), circle(), ellipse(), inset() and path() (SVG paths). Shapes are defined using percentage or absolute coordinates relative to the element's bounding box.
 
 
 
Common Use Cases
 
 
Diagonal section cuts
 
Hexagonal image grids
 
Custom hero shapes
 
Speech bubble elements
 
Animated reveal effects
 
Ribbon / banner corners
 
Circle avatar crops
 
Arrow / chevron dividers
 
 
Tips & Best Practices
 
 
 Animating clip-path 
You can transition between two polygon() shapes if they have the same number of points. Use this for morphing button hover effects or section reveals on scroll.
 
 
 Overflow is hidden 
clip-path clips all overflowing content including box-shadow. Apply shadows to a wrapper element instead of the clipped element itself.
 
 
 Use percentage units 
Define polygon points in percentages so the shape scales correctly with responsive layouts without needing media queries.
 
 
 Browser support 
All modern browsers support clip-path with basic shapes. The path() function has slightly less consistent support — prefer polygon for broad compatibility.
 
 
 
Frequently Asked Questions
 
 
Does clip-path affect element layout?
 
No. The element still occupies its full original space in the document flow. Only what is visually rendered changes. Use shape-outside if you need text to wrap around the shape.
 
 
 
Can I animate clip-path?
 
Yes, if the shape type stays the same and polygon points are equal in count. Transition between two polygon() shapes for morphing effects: transition: clip-path 0.4s ease;.
 
 
 
Why is my box-shadow not showing?
 
clip-path clips everything outside the shape, including shadows. Apply box-shadow to a parent wrapper element that is not clipped.
 
 
 
What is the difference between clip-path and mask?
 
clip-path uses geometric shapes for hard-edged clipping. mask uses images or gradients, allowing soft edges and partial transparency. For simple shapes, clip-path is faster and easier.