<\!-- Back --> <\!-- Header -->
CSS Tools
Clip-Path Generator
Visually design CSS clip-path shapes with drag handles, presets, and one-click code copy. 100% client-side.
<\!-- ═══ Controls ═══ --> <\!-- Shape Type --> <\!-- Presets --> <\!-- Polygon Points --> <\!-- Circle Controls --> <\!-- Ellipse Controls --> <\!-- Inset Controls --> <\!-- Colors --> <\!-- Reset --> <\!-- ═══ Preview & Code ═══ --> <\!-- Live Preview Canvas --> <\!-- CSS Code -->
<\!-- Related Tools --> Shape Type
Presets
Points (3)
150%0%
2100%100%
30%100%
Preview Colors
Live Preview (drag handles to adjust polygon points)
<\!-- Clipped shape --> <\!-- SVG overlay for polygon guides --> <\!-- Polygon drag handles -->
1
2
3
CSS Code
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);