What is clip-path and when do I use it?
clip-path is a CSS property that clips an element to a given shape. Set `clip-path: polygon(50% 0, 100% 100%, 0 100%)` and a plain div becomes a triangle. Anything outside the shape disappears.
Here you get ready presets (triangle, hexagon, octagon, star, arrow, message bubble, lightning) plus an interactive editor. Click in the area to add a point, drag a point to move it, double-click to remove. Circle and ellipse have their own presets with two drag handles.
The output is a copy-ready `clip-path: ...` CSS line you paste into your stylesheet.
How to use
- Pick a preset from the right column (triangle, star, arrow, bubble). Each comes with vertices ready to fine-tune.
- Drag any white dot to move it. Positions are in percentages (0-100%) so the shape scales with the element.
- Click in an empty area to add a new vertex (polygon mode only). Useful for advanced custom shapes.
- Double-click a vertex to remove it. Minimum 3 vertices (triangle).
- Copy the resulting CSS and paste it into your element style.
When this helps
Clip-path is a standard tool in modern web design since 2018 (supported everywhere). Instead of exporting an image for every unusual shape, you do it purely in CSS:
- Diagonal section divider (an angled line cutting between sections). A classic element in portfolios and SaaS landing pages.
- Hero with a photo clipped to a non-rectangle. Hexagon instead of a rectangle is a strong visual hook.
- Hex-shaped avatars (Discord and Slack have something similar).
- Tag-shaped promo card (lightning bolt, arrow). More eye-catching than a rectangle.
- Chat message bubble without drawing the tail with a ::after pseudo-element.
- Reveal animation: `transition: clip-path 0.5s`, small value to large value gives a wipe-in effect.
- Card with a clipped corner - classic in sci-fi UI.
To add a shadow under a clipped shape, use `filter: drop-shadow()` (box-shadow does not follow clip-path). For softer organic forms see the border-radius generator.