CSS Clip-Path Shape Generator
Visual CSS clip-path generator and polygon maker. Interactively drag vertex coordinates directly on the stage, choose from rich geometry presets (hexagons, stars, chevrons, speech bubbles), and export production-ready CSS and Tailwind classes.
CSS Clip-Path Generator
Create, edit, and fine-tune complex CSS clip-path shapes with interactive vertex drag-and-drop. Export clean CSS and Tailwind classes.
CSS Clip-Path
POLYGON
clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
-webkit-clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);[clip-path:polygon(50%_0%,_100%_38%,_81%_100%,_19%_100%,_0%_38%)]How to Use CSS Clip-Path Shape Generator
Input & Parameters
Select from triangles, hexagons, stars, chevrons, speech bubbles, circles, or insets.
Automatic Calculation
Click and drag the numbered handle dots directly on the preview stage to customize geometry.
Review & Copy
Copy standard CSS clip-path rules or Tailwind arbitrary class utilities.
Frequently Asked Questions
Related Tools
Modern CSS Gradient Generator
Design beautiful multi-stop linear and radial CSS gradients with live preview, Tailwind CSS classes, and one-click code copy.
Mesh Gradient Generator
Create organic, multi-point mesh gradients with draggable pins, custom spreads, and 4K PNG export.
CSS Fluid Typography & Clamp Calculator
Generate fluid CSS clamp(min, val, max) formulas for typography, padding, and spacing across viewports.
CSS Layered Smooth Shadows Generator
Create ultra-smooth multi-layer ambient box-shadows inspired by Stripe and modern design systems.