buncha/code & dev/css-clip-path

CSS Clip Path Generator

Click a preset to start, then drag any handle to reshape. Double-click an edge midpoint chip to add a vertex; tap the × on a handle to remove it (min 3 vertices). The CSS clip-path value updates live.

Shape presets

Background

Vertices

1.50.0% · 0.0%

2.100.0% · 38.0%

3.82.0% · 100.0%

4.18.0% · 100.0%

5.0.0% · 38.0%

CSS

clip-path: polygon(50.0% 0.0%, 100.0% 38.0%, 82.0% 100.0%, 18.0% 100.0%, 0.0% 38.0%);
-webkit-clip-path: polygon(50.0% 0.0%, 100.0% 38.0%, 82.0% 100.0%, 18.0% 100.0%, 0.0% 38.0%);

Drags happen in your browser. No upload.

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients…

CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that ov…

About CSS Clip Path Generator

Visual editor for CSS clip-path polygon shapes. Drag vertices, add or remove points, and copy the ready-to-paste clip-path value with the -webkit- prefix.

Everything happens on your device. Close the tab and it's gone.