Softonic

CSS Clip Path Generator

Step 1 / 2
Next

With clip-path you can cut any element into a polygon shape, creating shaped images, asymmetric hero sections or speech bubbles without SVG overlays. Writing polygon() coordinates by hand is an invitation to math errors. This generator emits the correct clip-path declaration for four ready-made shapes: triangle, diamond, trapezoid and hexagon. Pick a shape, generate, and copy the CSS.

How to build a clip-path

  1. 1

    Pick the shape

    Choose one of the four presets: triangle, diamond, trapezoid or hexagon.

  2. 2

    Generate the CSS

    Click the button and the tool builds the `clip-path: polygon(...)` rule for the selected shape.

  3. 3

    Copy the rule

    Copy the result and paste it into your stylesheet. Percentages keep the shape responsive to the element size.

  4. 4

    Read the coordinates

    Each pair of numbers is a vertex: the x and y position of that corner as a percentage of the element box.

  5. 5

    Apply it

    `clip-path` works on any element in all modern browsers, and the shape scales with the element.

The five shape functions

Function Syntax Use
inset() inset(10% 20% 10% 20% round 8px) Rectangular clip with insets and optional rounded corners
circle() circle(50% at 50% 50%) Circle
ellipse() ellipse(40% 25% at 50% 50%) Ellipse
polygon() polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) Any polygon
path() path("M0 0 L100 0 L50 100 Z") SVG path data (limited support)

Common polygon clips

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

The hero-section diagonal is probably the most-used of all, it gives a section that angled modern look without any SVG.

Animating clip-path

Clip-path animates as long as both states have the same shape function with the same number of points. A 4-vertex polygon animates smoothly to another 4-vertex polygon; adding or removing vertices breaks the interpolation.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Use this for reveal effects, subtle hover distortions, or page transitions.

Clip-path vs. overflow: hidden

overflow: hidden clips to the border-box rectangle (which can be rounded with border-radius). clip-path clips to any shape you define and clips everything, including shadows and outlines. If you need shadows to remain visible outside the shape, clip-path is not what you want.

filter: drop-shadow() can re-add a shape-following shadow on clip-path elements, but it is slower.

Performance

Clip-path is GPU-accelerated in modern browsers, so animated clip-paths are smooth. The exception is path() and very complex polygons (40+ vertices) which fall back to CPU rendering on some browsers.

Accessibility

Clip-path only changes what is visible. Screen readers, keyboard focus and pointer events follow the element’s full box, not the clipped shape. If an image is clipped into a star, the alt text is read normally. If a button is clipped into a chevron, its click target is the full rectangle, not the visible chevron, which can cause accidental clicks on seemingly empty space.

For buttons with unusual clipped shapes, set the element’s width/height tight so the hitbox matches the visible area reasonably well.

Frequently Asked Questions

All modern browsers (Chrome, Firefox, Safari, Edge) support polygon(), circle(), ellipse() and inset(). path() is supported in Chrome 88+, Firefox 97+ and Safari 13.1+. IE does not support any of it but its usage is below threshold for most sites now.

Because clip-path clips shadows along with everything else. Use filter: drop-shadow() instead, it follows the clipped shape and keeps the shadow visible.

Only between the same shape function with the same number of points. A polygon with 4 points animates to another polygon with 4 points. Adding or removing points, or changing between functions (polygon to circle), breaks the interpolation.

No, pointer events still go to the element’s full rectangle. A star-shaped button has a rectangular click area, including the transparent corners. Consider pointer-events: none on a ::before or use tightly sized elements if this matters.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.