✂️

CSS Clip-Path Generator

Create clip-path polygon shapes by dragging handles on a live preview. Choose presets or build custom shapes. Copy CSS instantly.

💡 Drag the white handles to reshape. Values are in % of the element's dimensions.
Presets
Points

About CSS Clip-Path Generator

The CSS clip-path property clips an element to a defined shape. Only the pixels inside the shape are visible. Use it to create diagonal sections, hexagons, stars, arrows, and any other polygon shape.

Common Use Cases

Hero sections — diagonal bottom edge · Image masks — hexagonal or circular image frames · Decorative dividers — between page sections · Custom buttons — angled or arrow-shaped

Frequently Asked Questions

No — the element still occupies its original space. Only the visible rendering is clipped. To avoid invisible areas being clickable, you may need to add pointer-events: none to the clipped-away regions, or use a different approach.
clip-path polygon() is supported in all modern browsers (Chrome, Firefox, Safari, Edge). It is not supported in Internet Explorer. No vendor prefixes are required for modern browsers.
In clip-path polygon(), percentage values are relative to the element's own width and height. 0% 0% is the top-left corner, 100% 0% is the top-right, 100% 100% is the bottom-right, and 0% 100% is the bottom-left.
Yes — you can animate between two clip-path polygon() values with CSS transitions or animations, as long as both polygons have the same number of points. This creates smooth morphing effects.

About CSS Clip-Path Generator

CSS clip-path lets you crop an element into any shape — polygons, circles, ellipses, or custom paths. This generator lets you drag handles to create clip-path shapes visually and exports the CSS instantly.

How to Use

  1. Choose a shape preset: polygon, circle, or ellipse.
  2. Drag the control points on the preview to reshape the clip area.
  3. The clip-path CSS value updates live.
  4. Click Copy CSS to copy the declaration for use in your project.

How It Works

The tool converts the handle positions (as percentages of the element dimensions) into a clip-path: polygon(), clip-path: circle(), or clip-path: ellipse() value. It applies this to the preview element so you see the result in real time.

Example

A diagonal banner cut: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
A circle crop: clip-path: circle(50% at 50% 50%);

Frequently Asked Questions

Yes. clip-path works on any HTML element including images, divs, buttons, and more. It is commonly used to create shaped image crops without needing Photoshop.
Yes. Clipped regions are also excluded from pointer events, so clicks only register on the visible area. This is useful for custom-shaped buttons.
Yes. clip-path is animatable in CSS using transitions or animations, as long as both keyframes use the same shape type and the same number of points. This enables reveal animations and morphing effects.
Yes. clip-path (with basic shapes) is well-supported in all modern browsers. Safari requires the -webkit- prefix for SVG-based clip paths but works fine with polygon, circle, and ellipse without it.