How to make a CSS clip-path
- Choose a shape such as Triangle, Star, Arrow, or Message bubble, or switch to Circle, Ellipse, or Inset.
- Drag the dots on the preview to reshape a polygon, or use the arrow keys. Add or remove points with the buttons.
- Press Copy CSS and paste the
clip-pathline onto your element.
The faded picture behind the shape shows what gets cut off. Use Preview with my image to try the shape on your own photo before you write it into your design.
Questions
Is my image uploaded?
No. If you preview with your own picture, it is shown straight from your device and never sent anywhere. The CSS is written by your browser.
What does clip-path do?
It hides every part of an element outside a shape you define, so a plain box can look like a triangle, a star, or a speech bubble. The hidden area also stops reacting to clicks.
Why do the points use percentages?
Percentages are relative to the element, so the same shape scales with it. A star on a 200 pixel box and on a 600 pixel box looks the same.
Can I animate between two shapes?
Yes, as long as both polygons have the same number of points. Copy one shape, copy another with the same count, and transition the clip-path property in CSS.
Does a clip-path cut off shadows and borders?
Yes. Anything outside the shape is clipped, including box-shadow and outlines. To keep a shadow, put the clipped element inside a wrapper and apply filter: drop-shadow() to the wrapper.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.