Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS polygon clip-path generator
Shape a polygon with draggable or numeric control points and export its live clip-path preview as CSS.
Drag a point or use arrow keys. Hold Shift for larger steps. Coordinates can also be edited directly.
CSS
About this tool
Sketch a diagonal panel or geometric badge and reuse its shape without creating an image mask.
How to use
Choose a triangle, diamond, hexagon or another preset, then drag its points or edit their X/Y percentages. Add or remove points to change the outline. Tab to a point and use arrow keys for fine adjustments; hold Shift for larger steps.
Polygons use 3–32 points with coordinates between 0% and 100%, joined and closed in list order. Copy or download clip-path: polygon(...) using the same values as the preview. Curved paths and cropped image downloads are not supported.
Common questions
Can I draw curves or points outside the box?
This editor creates polygons with 3–32 points, each from 0% to 100% on both axes. Curved paths and points outside those bounds are not supported.
Why does my polygon have unexpected cuts after moving points?
Points are connected in their listed order and the last point closes back to the first. Moving a point across another edge can create a self-intersection. Start from a preset and keep the vertices in perimeter order; delete unwanted points while retaining at least three.
Related tools
Opens in a new tab
Comments
0