Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Tool Panel
Processed locallyAbout Clip Path Generator
Start from one of six presets, then drag the points into any polygon (arrow keys nudge them). The output is a standard clip-path: polygon(), and the preview renders that exact value.
- 1
It generates `polygon()`: vertices are **percentage coordinates** (0–100 relative to the element itself), so one `clip-path` works on any size without recalculating pixels.
- 2
Dragging a vertex changes the shape (coordinates are clamped to 0–100), and the vertex order is the connection order — the wrong order gives a self-intersecting polygon, which is why dragging only moves points and never reorders them.
- 3
Six presets (triangle, rhombus, pentagon, hexagon, star, arrow) share state with the handles: once you drag, the preset stops being highlighted and Reset returns to it. Coordinates keep one decimal and drop a trailing `.0`, so the copied CSS reads like something you typed.
- 1
Pick a preset or drag a vertex
The preview box uses the same percentage coordinates as the output, so what you see is what you copy.
- 2
Check the shape
A self-intersecting outline shows up immediately as a wrong shape; hit Reset to get back to the preset and try again.
- 3
Copy the clip-path
The output is one `clip-path` line, ready for any element.
This tool emits plain polygons. CSS `polygon()` takes an optional fill rule: with `polygon(evenodd, …)` the self-intersecting parts become holes, so add `evenodd,` after `polygon(` in what you copy.
Layout is unaffected: the element keeps its space and only its painted area changes, so neighbouring elements do not move. But the clipped-away area **also stops receiving pointer events** — hit testing follows the clip path too, so do not clip an interactive control outside the shape.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Cubic Bezier Generator
Drag the control points to shape an easing curve and copy the CSS.
Design Tools