How to use the css clip-path generator
- Choose a Shape: polygon, circle, ellipse or inset rectangle.
- For a polygon, press a preset such as Hexagon or Star, or edit the points. Write one pair per line, such as 50% 0%, measured from the top left corner of the box.
- For a circle, ellipse or inset, enter the radius, center or side values in percent. The preview updates as you type.
- Press Copy CSS and paste both lines into your stylesheet. The -webkit- line helps older versions of Safari.
What clip-path does
The CSS property clip-path hides every part of an element that lies outside a shape. The element keeps its full size in the layout, but only the part inside the shape is painted and can be clicked. The property is described on MDN. Common uses are angled section edges, hexagon avatars, arrow shaped buttons and image masks.
Percent values are measured against the element itself, so a polygon scales with the box. 0% 0% is the top left corner, 100% 0% the top right, 0% 100% the bottom left and 100% 100% the bottom right. Points may go below 0 or above 100 to cut past an edge, and the tool accepts values from -100 to 200.
The four shape types
Polygon joins the points you list with straight lines and closes the shape. The presets are examples and every point can be edited. Points are drawn in the order you list them, so a list that crosses over itself gives a bow tie shape. Circle takes a radius and a center, so circle(50% at 50% 50%) is the largest circle that fits a square box. Ellipse takes two radii. Inset cuts in from each side by a percent and can round the corners.
The inset check makes sure the top and bottom together, and the left and right together, are less than 100 percent, because otherwise nothing is left to show. For a plain rounded rectangle with different corners, the border radius generator gives you more control. To put a gradient inside the shape, use the CSS gradient generator.
Things to remember
Clipped areas do not show a border or a shadow, because those are painted outside the clip. To add a shadow to a clipped shape, put it on a parent element with a filter drop shadow rather than box-shadow. A clipped element also stops receiving clicks outside the shape, which is usually what you want but can surprise you on a link.
Everything runs in your browser and the shapes are never sent anywhere. For layout inside the shape, see the flexbox generator.
Assumptions and limits
- The preview is a square box. The same percent values give a different look on a box that is not square.
- Polygon points can range from -100% to 200%, and a polygon can have 3 to 60 points.
- The output uses the unprefixed property and the -webkit- version only. Very old browsers may not support clip-path at all.
- Shapes are made of straight lines, circles and ellipses. Curves, paths and SVG shapes are not generated.
Frequently asked questions
How do I make a hexagon with CSS?
Use the Hexagon preset and copy the CSS. It sets clip-path to a polygon with six points on an element that you size yourself, such as a square image.
Why do my clip-path percentages not look like I expect?
Percentages are relative to the element's own width for x values and height for y values. On a wide box the shape is stretched. Use a square box, or set an aspect ratio, if you want circular or regular shapes.
Does clip-path cut off the shadow or border?
Yes. Anything outside the shape is hidden, including a box shadow or border. Put a drop shadow filter on a parent element instead.
Can the clipped part still be clicked?
No. The hidden area does not respond to the mouse or touch, so only the visible shape is clickable.