Shape & Layout · Free generator

CSS Clip-Path Generator

Free · no sign-up Live preview · copy or download the CSS

Cut real shapes out of any element — triangles, arrows, chevrons, hexagons, stars — with clip-path polygons. Pick a shape, size it, recolor it, copy the coordinates.

Settings

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minThe CSS Box ModelThe box the polygon coordinates map onto.STEP 2 · 15 minCSS Display & VisibilitySizing the element being clipped.STEP 3 · 20 minCSS TransitionsMorphing between shapes.


  1. CSS Border Radius GeneratorShape & Layout
  2. CSS Gradient GeneratorBackgrounds & Color
  3. CSS Hover Effects GeneratorAnimation & Motion
  4. CSS Box Shadow GeneratorShadows & Effects
  5. CSS Pattern GeneratorBackgrounds & Color
  6. CSS Layer Styles GeneratorShadows & Effects


How it works


clip-path draws a mask: everything inside the polygon stays visible, everything outside vanishes — background, borders, even text. Coordinates are percentages of the element's box, so shapes scale with the element. The old border-hack triangle still exists (transparent side borders meeting a colored one), but polygons are readable, scalable and animatable.


Two shapes with the same number of points can morph between each other with a transition — hover-morphing hexagons into stars is a one-liner. Note the clipped region also defines the clickable area.


Run the code — try it yourself
Turn the square into a hexagon badge with the hexagon polygon, then make it morph to a star on hover (equal point counts won't morph here — just swap; or try two hexagon variants).


exercise.html — editable


Frequently asked questions
Where did my drop shadow go?
clip-path clips it. Use filter: drop-shadow() on a parent wrapper — the filter follows the clipped silhouette.
Can I clip images?
Yes — any element, img included. Hexagonal avatars are exactly this.
Can clip-path animate?
Between polygons with equal point counts, smoothly. Different counts snap.
What about circles and curves?
clip-path also accepts circle(), ellipse() and inset(); for arbitrary curves, use an SVG path via url().


Keep going
Shapes break the tyranny of the rectangle — section dividers, badges, image frames, decorative arrows, all without image files. The geometry mindset starts in the Float & Overflow lesson's clipping ideas and pays off across the whole shape toolbox.
CSSmatic is a non-profit project, made by developers for developers.