About the CSS Clip-Path Generator
CSS Clip-Path Generator makes the clip-path CSS that cuts an element into a shape. Choose a ready polygon (triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, arrow, chevron, cross or message bubble), or a circle, an ellipse or an inset rectangle with rounded corners, move the sliders and see the result on a gradient block. The page writes the clip-path line plus the -webkit-clip-path version for older Safari, ready to copy into your stylesheet. It is a fast way to add angled section edges, hexagon avatars, arrows and badges without images.
Updated October 2026
How to use the CSS Clip-Path Generator
- 1Choose the shape type: polygon, circle, ellipse or inset.
- 2For a polygon, pick the shape from the list.
- 3For circle, ellipse and inset, move the sliders.
- 4Check the preview.
- 5Copy the CSS and add it to your element.
How clip-path shapes work
Every shape is described by coordinates inside the element's box, where 0% 0% is the top left corner and 100% 100% the bottom right. A polygon lists its corner points in order. A circle gives a radius and a centre, an ellipse two radii, and inset shows how far to cut from each side, with optional rounded corners.
Common uses
Clip-path replaces many tricks that once needed images or extra markup. It keeps pages fast and shapes sharp at any size.
- Hexagon and circle avatars
- Angled hero sections and dividers
- Arrow and chevron labels and breadcrumbs
- Message bubbles and badges
- Reveal animations that grow a shape
Tips
Test the shape with real content, because text near the cut corners will be hidden. For a shadow around a clipped shape, put the shape inside a wrapper and add filter: drop-shadow to the wrapper. If you need a custom polygon, start with the closest preset and edit the numbers.
Related tools
Round corners with the Border Radius Generator, add depth with the Box Shadow Generator, draw triangles with the CSS Triangle Generator and make colours with the CSS Gradient Generator.
Features
- Twelve ready polygon shapes
- Circle, ellipse and inset with rounded corners
- Live preview
- Percentage values that scale with the element
- -webkit- prefix included
- Private: nothing is uploaded
Frequently asked questions
What is clip-path?
A CSS property that hides everything outside a shape you define, so a normal box can look like a triangle, hexagon, circle or any polygon.
Why use percentages?
Percent points scale with the element, so the shape keeps its proportions when the size changes, such as on different screens.
Does clip-path affect the click area?
Yes. Parts outside the shape do not receive clicks or hover, which is usually what you want. Shadows and borders are cut off too, so use a wrapper element or filter: drop-shadow for a shadow.
How do I make an angled section edge?
Use a polygon that cuts the bottom corner, for example clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) on a full-width section.
Does it work in all browsers?
It works in all current browsers. Add the -webkit- version, which this tool includes, for older Safari.
Can I animate it?
Yes, if the number of points is the same in both shapes. Transition the clip-path property for a smooth morph.
Does it work on images?
Yes. It works on any element, including img and video.
Can I make my own polygon points?
Start with the closest preset and copy the CSS. Then edit the percentage pairs by hand. Each pair is the horizontal and vertical position of one corner.
Why is part of my content missing?
Anything outside the clip shape is hidden, including text and borders. Add padding so that content stays inside the visible area, or choose a shape with fewer cut corners.
Is clip-path good for SEO or accessibility?
The content is still in the page and readable by screen readers and search engines. Only its appearance is clipped, so make sure the visible part still shows the important content.
Is my shape uploaded?
No. It is made in your browser.