CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)
Color
`clip-path` is the CSS property that lets you cut any DOM element into a non-rectangular shape — useful for image masks, fancy section dividers, decorative cards, custom buttons, and Photoshop-style hover effects. The syntax is short but unforgiving: `circle(r at cx cy)`, `ellipse(rx ry at cx cy)`, `polygon(x1 y1, x2 y2, …)`, and `inset(top right bottom left round r)`. This tool gives you a live preview with three swappable backgrounds (image, solid color, gradient) and the shape parameters as sliders/number inputs. For polygons you can edit each vertex's percentage coordinates, or click anywhere on the preview to add a new point — handy for tracing freehand shapes. Ten preset polygons (triangle, rhombus, pentagon, hexagon, star, arrow, message bubble, parallelogram, trapezoid, plus) cover the cases everyone needs. The output is a clip-path declaration with the matching -webkit-clip-path fallback prefix, ready to paste into any stylesheet.
Tip: click the preview to add a polygon point at that position.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);About clip-path
clip-path supports basic shapes (circle, ellipse, polygon, inset), CSS `path()` with SVG path data, `url(#id)` referencing an inline SVG <clipPath>, and the geometry-box keywords. This tool emits the basic shape form, which is the most widely supported and easiest to maintain. All percentages refer to the element's reference box (default: border-box). The element still occupies its original layout — clipping only affects rendering. For complex curved shapes, draw an SVG <path> and reference it via clip-path: url(#myShape).
How to use
- Pick a shape: circle (one radius + center), ellipse (two radii + center), polygon (3-16 vertices), or inset (rectangle cut from each edge with optional rounded corners).
- Tweak with sliders or number inputs. For polygons, click anywhere on the preview to add a vertex at that position.
- Tap a preset (triangle, hexagon, star, arrow, …) to start from a known shape and edit from there.
- Switch the preview background (image, solid, gradient) to see how your shape will look against real content.
- Copy the CSS — it includes both the modern `clip-path` and the `-webkit-clip-path` fallback for older Safari versions.
Frequently asked questions
- Why does clip-path use percentages?
- Percentages make the shape responsive: a `polygon(50% 0%, 100% 100%, 0% 100%)` triangle stays a triangle whether the element is 100px or 1000px wide. You can also use absolute units like px, em, or rem, but for reusable components, % is almost always what you want. This tool only outputs percentages — paste, then change units in your CSS if you really need a fixed size.
- Does the element still take up its original space?
- Yes. `clip-path` is purely a paint-time effect — the element's layout box doesn't change, so surrounding content flows around the original rectangle, not the clipped shape. If you need the layout to respect the visible shape, use `shape-outside` (separate property), `mask-image`, or an SVG with a path.
- Can I animate clip-path?
- Yes, but only between paths with the same number of vertices in the same shape family — you can animate one polygon to another polygon with identical vertex count, or one circle to another circle, but not polygon-to-circle. For polygon morphing make sure both states have the same number of points in roughly the same order. The browser interpolates vertex coordinates linearly.
- What's the inset 'round' value for?
- It's an optional radius applied to the four corners of the inset rectangle — same syntax as `border-radius`. `inset(10% round 5%)` is a rounded rectangle clip. Set it to 0 (no `round`) for sharp corners. The CSS spec lets you specify different radii per corner (`round 10% 20% 5% 15%`), but this tool keeps it simple with one uniform value.
- Why both clip-path and -webkit-clip-path?
- Safari needs the `-webkit-clip-path` prefix on versions older than 14.1 (2021). Almost all current browsers support unprefixed `clip-path`. Emitting both costs nothing and protects users on slightly older devices. You can drop the `-webkit-` line if you only target evergreen browsers.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.