Clip elements into triangles, hexagons, stars, arrows, message bubbles and more — pick a shape, tune it, and copy the clip-path CSS or the Tailwind arbitrary-value class.
Settings
Generated locally in your browser — your settings and results never leave this page.
Shapes without images
Angled hero sections, hexagonal avatars, star badges, arrow CTAs — all achievable with one CSS property and no image editor. Pick from fifteen shapes (twelve tuned polygons plus parametric circle, ellipse and rounded-inset), adjust the sliders where the shape allows, and copy the CSS — or the Tailwind arbitrary-value class with spaces pre-encoded as underscores.
Worked example
.clipped {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Tailwind */
class="[clip-path:polygon(25%_0%,75%_0%,100%_50%,75%_100%,25%_100%,0%_50%)]"Things clip-path teaches you the hard way — pre-answered
- Hit-testing follows the clip: the cut-away corners stop being clickable, per spec. Usually desirable; wrap the element if the full rectangle must stay interactive.
- Layout ignores the clip: the element still occupies its rectangular box — neighboring content does not flow into the cut regions (that would be shape-outside’s job).
- Percentages scale: polygon points in % adapt to any element size, which is why the presets survive responsive layouts.
Browser support
- Basic shapes (polygon, circle, ellipse, inset) are supported in all modern browsers and have been since roughly 2020. This generator deliberately sticks to them — path() and external SVG references are less uniform.
Use cases
- Angled section dividers (trapezoid on a full-width hero), image masks (hexagon/rhombus avatars), directional UI (arrows, chevrons), decorative badges (star) — pair with the Animation Generator for entrances.
How to use the CSS Clip-Path Generator
- Choose a shape — polygons like hexagon and star, or parametric circle/ellipse/inset.
- Tune the size, inset or corner-radius sliders where the shape allows.
- Check the live clipped preview.
- Copy the CSS — or the Tailwind arbitrary-value class.
Frequently asked questions
What is clip-path and when should I use it?
A CSS property that clips an element to a shape — everything outside the path becomes invisible. It is the standard way to get angled hero sections, hexagonal avatars, badge stars and arrow CTAs without image editing; the underlying box stays rectangular for layout.
Why did my element stop being clickable at the corners?
Clipping removes the clipped region from hit-testing too — clicks outside the visible shape fall through. That is per spec and usually desirable; wrap the element if you need the full rectangle interactive.
How well is clip-path supported?
Basic shapes (polygon, circle, ellipse, inset) work in all modern browsers, and have since roughly 2020. The path() function and clipping to external SVG references are less uniform — this generator sticks to the universally supported shapes.
How do I use these shapes in Tailwind?
Via an arbitrary value: class="[clip-path:polygon(…)]" with spaces as underscores — the generator emits exactly that string. For shapes you reuse, define a utility in your CSS once instead of repeating the literal.
