[{"data":1,"prerenderedAt":85},["ShallowReactive",2],{"tool-content-en-clip-path-generator":3},{"id":4,"title":5,"body":6,"description":75,"extension":76,"locale":77,"meta":78,"navigation":79,"path":80,"seo":81,"stem":82,"toolId":83,"__hash__":84},"tools\u002Ftools\u002Fen\u002Fclip-path-generator.md","CSS Clip-path Generator",{"type":7,"value":8,"toc":67},"minimark",[9,14,38,42,45,49,56,60],[10,11,13],"h2",{"id":12},"four-shape-functions","Four shape functions",[15,16,17,18,22,23,22,26,29,30,33,34,37],"p",{},"Build ",[19,20,21],"code",{},"circle()",", ",[19,24,25],{},"ellipse()",[19,27,28],{},"inset()",", and ",[19,31,32],{},"polygon()"," clip paths. Circle, ellipse, and inset use sliders for radius, radii, offsets, and the ",[19,35,36],{},"round"," corner radius. Inset shorthand is expanded to four explicit percentages for clarity.",[10,39,41],{"id":40},"drag-polygon-points","Drag polygon points",[15,43,44],{},"Grab any vertex in the preview and drag it — coordinates snap to a 0–100% grid and mirror into the numeric fields. Add or remove points freely (3 to 24); the gradient preview shows the exact clipped result.",[10,46,48],{"id":47},"presets-and-import","Presets and import",[15,50,51,52,55],{},"Start from triangle, diamond, hexagon, star, arrow, speech bubble, avatar circle, or ticket presets, then fine-tune. Paste any existing ",[19,53,54],{},"clip-path"," value (with or without the property name) into the import box to keep editing it here.",[10,57,59],{"id":58},"export","Export",[15,61,62,63,66],{},"Copy or download a ready-to-use ",[19,64,65],{},"clip-path: ...;"," declaration. Your shape is saved in this browser. All processing happens locally.",{"title":68,"searchDepth":69,"depth":69,"links":70},"",2,[71,72,73,74],{"id":12,"depth":69,"text":13},{"id":40,"depth":69,"text":41},{"id":47,"depth":69,"text":48},{"id":58,"depth":69,"text":59},"Drag polygon points or tune circle, ellipse, and inset values to build clip-path CSS, with presets and import. All local.","md","en",{},true,"\u002Ftools\u002Fen\u002Fclip-path-generator",{"title":5,"description":75},"tools\u002Fen\u002Fclip-path-generator","clip-path-generator","d7Aw1ztoQ-x83pqsy4CMaFFWXXk_2r2M4OqPXOPexVE",1792391416680]