Draw a clip-path by dragging points on a live preview, or start from one of 24 shapes: triangles, hexagons, stars, arrows, chevrons, a message bubble, a frame and slanted section edges. Circle, ellipse and inset shapes have their own controls, and polygon corners can be rounded with the new shape() function.

Switch to the blob generator for organic shapes made from eight border-radius values or from a smooth SVG path, with an optional morph animation that respects reduced motion. Every shape can be copied as plain CSS, Tailwind CSS 4 classes or a @utility, Bootstrap 5 markup, or downloaded as an SVG file, and the link keeps your settings.

CSS clip-path & blob generator Shapes to CSS, Tailwind CSS 4 and Bootstrap 5

Mode

Presets

Preview

Drag a point, or focus it and use the arrow keys: 1% per press, 10% with Shift. Delete removes the focused point. Double-click the preview to add a point there.

Code

Used for the CSS class, the Tailwind utility and the animation name, for example .clip-shape.

CSS

shape() version

Shape

Shape function

Point 1 of 6

Add point inserts a new point halfway to the next one. A polygon needs at least 3 points.

Rounded corners need shape(). Browsers without it keep the sharp polygon.

A percentage radius is measured against the box diagonal divided by √2, so 50% reaches the corners of a square.

Units in the code

Percentages scale with the element, so the shape fits any size.

Blob type

Eight border-radius values: the lightest blob, no clip-path needed.

How far the shape moves away from a circle.

How unevenly the corners are rounded. High values add flatter sides.

The same seed always draws the same blob, and the link keeps it.

Box and fill

The size of the element you will clip. Pixel values and rounding are worked out for this box.

Preview fill

Hex colours, such as #297abe or #fff.

Morph animation

The code adds @keyframes wrapped in prefers-reduced-motion: no-preference, so the blob stays still for people who ask for less motion.

How to use it

  1. Choose Clip-path editor or Blob generator, then pick a preset that is close to the shape you want.
  2. For a polygon, drag the numbered points on the preview, or focus a point and move it with the arrow keys (Shift moves 10%). Use Add point, Remove point, the X and Y fields or a double-click on the preview to change the outline, and turn on Snap to grid for clean values.
  3. For circle, ellipse and inset shapes, set the radius, centre or edges with the sliders. Set the width and height of the element you will clip and choose percent or pixel units.
  4. For a blob, pick border-radius or SVG path, adjust complexity, contrast, points or randomness, and press Randomise until you like the shape. Tick Morph between two blobs to animate it.
  5. Open the CSS, Tailwind 4, Bootstrap 5 or SVG tab, set a class name, and copy the code, copy the link to share your settings, or download the .svg file.

How CSS clip-path works

clip-path hides every part of an element that falls outside a shape. The element keeps its full box in the layout, so nothing around it moves, and the hidden parts no longer receive clicks or taps. It works on images, on elements with a background and on whole sections.

There are several shape functions. polygon() takes a list of x and y points; percentages are measured from the top-left corner of the element, so the shape scales with it. circle() takes a radius and a centre, written as circle(40% at 50% 50%); a percentage radius is measured against the diagonal of the box divided by the square root of 2. ellipse() takes a horizontal and a vertical radius, measured against the width and the height. inset() cuts in from each edge and can round the corners with the round keyword, using the same syntax as border-radius.

path() accepts SVG path data, which allows curves, but its coordinates are always pixels, so the shape does not scale with the element. The newer shape() function fixes that: it describes the same moves, lines and curves with CSS units, so you can use percentages. This tool uses shape() for rounded polygon corners and for scalable blobs, and keeps a polygon() or path() fallback inside @supports.

Blobs: border-radius versus an SVG path

border-radius accepts up to eight values: four horizontal radii, a slash, and four vertical radii, for the top-left, top-right, bottom-right and bottom-left corners. With different values on each side the corners become uneven ellipses, and the element turns into an organic blob. When the radii on one side add up to 100%, the curves meet without a flat section, which is why smooth blobs often use pairs such as 60% and 40%. If the radii on a side add up to more than the side, the browser scales all of them down in proportion.

A border-radius blob is the lightest option: one property, supported in every browser, and text inside the element can still use padding. Its limit is that it always has four rounded corners, so it cannot make sharper lobes or more than four bulges.

An SVG path blob places any number of points around a centre and joins them with smooth cubic curves. It can be used as an SVG image, as clip-path: path() for a fixed pixel size, or as clip-path: shape() with percentages so it scales. Both blob types in this tool are drawn from a seed, so the same seed and settings always give the same shape.

Animating shapes and reduced motion

Browsers can animate clip-path smoothly between two shapes of the same kind with the same number of points: two polygons with six points each, two circles, or two path() or shape() values with the same list of commands. A transition between a hover state and the normal state works the same way. If the shapes do not match, the browser jumps from one to the other instead of morphing.

border-radius animates between any two values, which makes it an easy way to build a slowly morphing blob. The morph option in this tool writes @keyframes between two seeded shapes and runs them with animation-direction: alternate, so the loop goes back and forth without a jump.

Constant movement can distract or cause discomfort, so the animation is wrapped in @media (prefers-reduced-motion: no-preference), or uses the motion-safe: variant in Tailwind. People who ask their system for less motion see a still shape. Decorative blobs should also be hidden from screen readers with aria-hidden="true", while a clipped photo still needs a normal alt text.

Browser support

polygon(), circle(), ellipse() and inset() work unprefixed in all current browsers. Very old Safari versions needed the -webkit-clip-path prefix, which is no longer necessary for current releases. path() in clip-path is supported in current Chrome, Edge, Firefox and Safari.

shape() is newer. Chrome and Edge 135 and Safari 18.4 support it, and current Firefox releases do too. Because some visitors use older versions, the generated code puts shape() inside @supports (clip-path: shape(from 0 0, line to 0 0)) and keeps a polygon() or path() line before it, so older browsers still show a sharp polygon or a fixed-size blob.

border-radius blobs need no fallback. The CSS aspect-ratio property used to size the blob works in all current browsers, and the Tailwind classes need Tailwind CSS 4 for bg-linear-135 and the supports-[…] variant.

Use it with our free components: CSS arrows · Speech bubbles · SVG wave generator

Frequently asked questions

Should I use percentages or pixels in clip-path?

Use percentages in most cases. They are measured against the element's width and height, so the shape stretches with the element on every screen size. Pixel values are useful when the element always has the same size, or when a detail such as a notch must stay exactly the same size while the element grows.

How do I round the corners of a clip-path polygon?

polygon() itself only draws straight corners. Set Corner rounding in this tool and it writes a shape() version in which every corner is a short curve, inside @supports, with the sharp polygon as the fallback. For a plain rectangle, inset() with the round keyword, such as inset(0 round 24px), is simpler.

How do I use clip-path in Tailwind CSS 4?

Use an arbitrary property such as [clip-path:polygon(50%_0%,100%_100%,0%_100%)], with underscores in place of spaces. For a shape you reuse, add an @utility block with the clip-path declaration to the CSS file that imports Tailwind and use its name as a class. Blobs made with border-radius can use rounded-[60%_40%_30%_70%/60%_30%_70%_40%].

Does Bootstrap 5 have clip-path utilities?

No. Bootstrap 5 has utilities for rounded corners, object-fit and positioning, but not for clip-path or eight-value border-radius blobs. Add one small custom class with the clip-path or border-radius declaration, load it after bootstrap.min.css, and combine it with Bootstrap classes such as img-fluid, w-100 and object-fit-cover.

Why do clicks not work on the hidden part of a clipped element?

clip-path also clips hit testing, so the areas outside the shape do not receive pointer events. Clicks there go to whatever is underneath. The element's box still takes up the same space in the layout, so add margins or padding around it yourself if the clipped shape looks closer to its neighbours than you want.

More free tools