ffee All tools
EN 中文 FR DE

CSS Shape Generator

Build a clip-path polygon, circle, ellipse or inset shape and copy the finished rule.

Build a clip-path shape

clip-path: —
Shape: — · points kept: —
Each polygon point is a pair of x and y values written as a percentage or a length, separated by commas. Circles use one radius, ellipses use two.

How to use the CSS Shape Generator

  1. Pick a polygon, circle, ellipse or inset shape from the list.
  2. Edit the polygon points or drag the radius, inset and position controls.
  3. Copy the generated rule with both the standard and webkit clip-path properties.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator

Frequently Asked Questions

Common questions about the free online css shape generator.

It cuts an element into a shape. Anything outside the path is hidden, while the element keeps its place in the page layout.
List pairs of x and y values separated by commas, such as 50% 0% for a top centre point, and give at least three points to close a shape.
Yes. Percentages scale with the element box, while pixel values stay fixed, so a mix lets one axis follow the box and the other stay exact.
Inside an inset shape it adds rounded corners, using one radius for every corner or four separate radius values.
The polygon probably has fewer than three valid points, or the points are in an order that folds the path over itself.
Modern browsers all support it. Older Safari versions need the webkit prefixed property, which the generated rule already includes.
Yes. Two polygons with the same number of points can be transitioned between, which makes an opening or revealing animation possible.
Yes. It is completely free, runs locally in your browser and needs no account, no sign-up and no upload.

Last updated: October 10, 2026