CSS Clip-path Generator
Shape Type
Points — 3 vertices
P1%%
P2%%
P3%%
Live Previewdrag · right-click to delete
Background
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Related Tools

See all ->
CSS Shape Generator37 shapes · 7 exportsGlassmorphism GeneratorFrosted glass effect builderCSS Filter GeneratorVisual image filtersCSS Transform GeneratorTranslate, rotate, scaleBox Shadow GeneratorCSS shadow studioGradient GeneratorCSS gradient builderCSS Animation GeneratorKeyframe animation builderColor PickerHEX · RGB · HSL · OKLCH

CSS Clip-path Generator Online — Polygon, Circle, Ellipse, Inset

Updated May 17, 2026
Share & Support

What's included

Features

18 preset shapes: triangle, diamond, pentagon, hexagon, star, arrow, chevron, parallelogram, trapezoid, cross, message bubble, and more
Draggable polygon handles — drag any vertex directly on the live preview to reshape; apply CSS transforms to those shapes with our CSS Transform Generator
Click the preview to add new points to any polygon, right-click to remove a point
Four shape modes with dedicated controls: polygon, circle, ellipse, inset()
Slider controls for radius, center X/Y (circle/ellipse) and all four inset sides with border-radius
Three export formats: CSS property, Tailwind arbitrary value, React inline style
Show/hide outside toggle — visualize the clipped vs visible region
Three preview backgrounds: color gradient, solid color picker, checkerboard pattern; add box shadows behind clipped elements with our Box Shadow Generator

About this tool

Create Any CSS clip-path Shape Visually — Drag the Polygon Handles, Copy the Code

Runs in your browser
No install or signup
Free forever

You need a diagonal section divider, a hexagon image crop, or an arrow-shaped button — but writing clip-path: polygon(50% 0%, 100% 100%, 0% 100%) coordinates by hand and counting pixels is brutal. Drag the handles on the preview here and the CSS updates in real time.

The polygon editor lets you drag any vertex, click to add new points, and right-click to remove them. All 18 presets — triangle, diamond, pentagon, hexagon, star, arrow, chevron, parallelogram, trapezoid, cross, message bubble, and more — load instantly as a starting point you can reshape. Switch between four shape modes: polygon() for custom multi-point shapes, circle() with radius and center sliders, ellipse() for oval crops, and inset() for rectangular clips with rounded corners. The clipped region is shown as a faint overlay so you can see exactly what will be hidden.

Exports: plain CSS (clip-path: polygon(...);), Tailwind arbitrary value format ([clip-path:polygon(...)]) ready to paste into a JSX className, and React inline style object (clipPath: '...'). All processing runs in your browser — nothing sent to any server.

Step by step

How to Use

  1. 1
    Pick a preset shapeChoose from the 18 preset shapes listed in the right panel — Triangle Up/Down/Left/Right, Corner variants, Diamond, Pentagon, Hexagon, Star, Arrow, Chevron, and more. The preview updates immediately to show the clip-path applied to the preview element.
  2. 2
    Drag polygon handles to reshapeFor polygon shapes, each vertex appears as a draggable purple handle on the preview canvas. Click and drag any handle to move it and reshape the polygon in real time. The clip-path coordinates update live as you drag.
  3. 3
    Add or remove polygon pointsClick anywhere on the preview canvas (not on an existing handle) to add a new polygon vertex at that position. Right-click any handle to delete that point. A minimum of 3 points is required to maintain a valid polygon.
  4. 4
    Switch shape modesClick Polygon, Circle, Ellipse, or Inset in the Shape Type selector to change the clip-path function. Circle and Ellipse modes show radius and center position sliders instead of handles. Inset mode provides four side sliders (top, right, bottom, left) and a border-radius slider for rounded rectangular clips.
  5. 5
    Toggle the outside region overlayClick "Show outside" at the top of the preview to display a faint overlay over the clipped region. This makes it easy to visualize exactly which pixels will be hidden and where the visible shape boundary falls.
  6. 6
    Change the preview backgroundSwitch the preview background between Gradient, Solid color, and Checkerboard pattern to see how the clipped element looks in different contexts. Use Checkerboard to visualize the clipped transparent areas accurately.
  7. 7
    Export the codeSelect CSS, Tailwind, or React from the export format tabs. CSS gives the clip-path property ready to paste into a stylesheet. Tailwind gives the [clip-path:polygon(...)] arbitrary value format. React gives the clipPath style prop in camelCase. Click Copy to copy the output.

Real-world uses

Common Use Cases

🔷
Crop a profile photo or hero image to a hexagon or diamond without Photoshop
Apply clip-path to an img element — pure CSS that scales responsively with the element and requires no image editing software.
▶
Create an arrow-shaped CTA button or parallelogram navigation tab
Use clip-path on a standard button element — polygon coordinates are percentages so the shape scales correctly at any button size.
✦
Build a diagonal or chevron section divider between page sections
Apply clip-path to a full-width section background div to create a clean angled transition between sections — no SVG, no negative margin hacks. Layer a mesh gradient behind it with our Mesh Gradient Generator.
💬
Make a CSS tooltip or speech bubble pointer shape
Use polygon() to cut a triangle pointer into a tooltip div. Combine with a solid background color for a clean callout without extra markup.
⭐
Mask an image or div to a star, badge, or hexagon shape
Clip images or colored backgrounds to badge shapes for achievement icons, avatar frames, and icon systems — no image files needed, fully CSS.
🎞️
Animate a CSS shape reveal on page load or scroll
CSS transitions animate smoothly between two polygon() shapes with the same number of vertices. Transition from all-points-at-center to the full polygon for a reveal effect — no JavaScript. Build the animation keyframes with our CSS Animation Generator.

Got questions?

Frequently Asked Questions

Use the CSS clip-path property with polygon() coordinates. This tool generates the correct polygon() value — pick the Triangle, Hexagon, or Star preset, then copy the CSS output. Clip-path works on any HTML element including images, divs, and buttons, and uses percentage coordinates so the shape scales responsively.

clip-path clips an element to a defined shape — only pixels inside the shape are visible. It supports polygon() for custom multi-point shapes, circle() for circular clips, ellipse() for ovals, and inset() for rectangular clips with optional rounded corners. It works on any HTML element without affecting document layout.

Polygon coordinates are percentages of the element's bounding box. 0% 0% is top-left, 100% 0% is top-right, 100% 100% is bottom-right, 0% 100% is bottom-left. A triangle pointing up is polygon(50% 0%, 100% 100%, 0% 100%). Percentages make the shape responsive — it scales with the element at any size.

Yes — CSS transitions animate clip-path smoothly when both the start and end values use the same shape function and the same number of points. To animate a reveal, transition from all points collapsed to the center (polygon(50% 50%, 50% 50%, 50% 50%)) to the full polygon. Both states need the same vertex count.

Tailwind has no built-in clip-path utilities — use arbitrary value syntax: className="[clip-path:polygon(50%_0%,100%_100%,0%_100%)]". Spaces inside arbitrary values must be replaced with underscores. This tool generates the Tailwind format directly in the Tailwind export tab — copy and paste.

Yes — clipped areas are also non-interactive. Mouse events (hover, click) only register inside the visible clip region. If you need the full element area to be clickable regardless of the clip shape, apply clip-path to a child element only, keeping the parent fully interactive.

border-radius only rounds the corners of a rectangle. clip-path supports any shape — triangles, stars, arrows, hexagons, polygons with any number of vertices. Both clip visual rendering but clip-path is far more flexible for non-rectangular shapes.

Yes — polygon, circle, ellipse, and inset are supported in all modern browsers (Chrome, Firefox, Safari, Edge) without vendor prefixes. Global support exceeds 96% as of 2025. Safe to use in production without fallbacks for most projects.