How does clip-path affect accessibility?

Clipped areas can be "invisible" but still accessible to a screen reader (AT). If the cut fragment contains content – it may be misleading. For purely decorative elements: aria-hidden="true". Contrast: clip-path does not change color contrast.

CSS Clip Path Generator

Fast, accurate and free online css clip path generator tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Base shape

💡 Drag the white points in the preview to edit the polygon live.

Shape Settings

Preview Background

Polygon Presets

Polygon Points (X Y on separate lines)

Add -webkit- Prefix

CSS Object Code

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Rate this tool:

Related tools

Other tools you may find useful

CSS clip-path generator - cut HTML elements into any shape

CSS clip-path allows you to "cut" an HTML element into any shape - triangle, hexagon, star, custom polygon. No SVG, no Canvas – pure CSS. The tool generates the clip-path value by dragging nodes in the live view.

CSS clip-path generator clip path CSS generator CSS shapes online polygon clip-path maker

Clip-path value types

polygon(x1 y1, x2 y2, ...): any polygon. circle(radius at cx cy): circle. ellipse(rx ry at cx cy): ellipse. inset(top right bottom left round radius): rounded rectangle. path("M..."): SVG path – the fastest option. none: no masking (reset).

Units and values

Percentages (%, relative to the element): polygon(50% 0%, 100% 100%, 0% 100%) – a triangle occupying the entire element. Pixels (px, absolute): for precise shapes with fixed dimensions. vw/vh: relative to viewport. Blending: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%).

Clip-path animation

CSS transition: .element { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.5s ease; } .element:hover { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }. Both shapes must have the same number of points! GSAP MorphSVG: animation between different numbers of points.

UI/UX Uses

Triangular section decorations (replaces SVG separators). Hexagonal cards (hexagonal grid). Skewed hero sections. Avatar masks (polygon instead of border-radius). Hover effects: clip-path with transition = expanding element. reveal animations on scroll.

FAQ

What browsers support CSS clip-path?

clip-path on HTML elements: Chrome 55+, Firefox 54+, Safari 9.1+ (-webkit- prefix for older). path() value: Chrome 88+, Firefox 71+, Safari 13.1+. IE11: does not support clip-path (only SVG clip-path with prefix). Caniuse: clip-path = ~97% global support (2024).

Does clip-path affect the layout (space occupied)?

Clip-path hides visually but the element still takes up space in the layout (unlike display:none). Interaction (click): depends on the browser - some ignore clicks in the "cut out" area. overflow: hidden + clip-path: different behavior.

How to make a diagonal section?

Clip-path method: .section { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }. Transform method: transform: skewY(-3deg) on section + contra-skew inside. SVG method: SVG wave separator below the section. Clip-path: the purest CSS-only solution.

Does clip-path work on movies (videos)?

Yes - clip-path works on any HTML element, including