CSS Clip-Path Generator
Drag the points on the preview to reshape. Double-click a point to remove it, or click a dot on an edge to add one.
Basic Shapes
Advanced Shapes
Custom Shapes
Copy the generated CSS and apply it to your HTML elements:
CSS Clip-Path Generator - Create Custom Shapes & Effects
The CSS Clip-Path Generator is a free visual tool that turns the tricky clip-path property into a point-and-drag experience. Pick a shape from the library, switch between circle, ellipse, rectangle and polygon types, and drag points directly on the live preview to sculpt exactly the silhouette you want. As you work, the tool writes clean, ready-to-paste CSS (or a Tailwind arbitrary value) so you never have to calculate a single coordinate by hand.
How to Use the Clip-Path Generator
Choose a shape type tab or click any thumbnail in the Shape Library to load a preset as your starting point.
For polygons, drag the points on the preview, double-click a point to remove it, or click a dot on an edge to add one. For other types, fine-tune with the sliders.
Switch the background to a gradient, checkerboard or your own image, resize the preview, and toggle the clipped-area outline to see exactly what gets hidden.
Choose CSS or Tailwind output, toggle the -webkit- prefix if needed, then copy the generated code straight into your project.
Key Features
Reshape polygons by dragging points directly on the preview, with click-to-add and double-click-to-remove for full control.
Browse 25+ presets rendered as real clipped thumbnails, grouped into basic, advanced and custom shapes.
Switch instantly between circle, ellipse, rectangle (inset) and polygon, each with its own dedicated controls.
Test your shape over a gradient, checkerboard or uploaded image, and reveal the clipped-away area with a ghost outline.
Adjust the preview width and height to check how percentage-based shapes respond to different aspect ratios.
Export clean CSS with an optional -webkit- prefix, or a ready-to-use Tailwind arbitrary value, with one-click copy.
Common Use Cases
Clip photos into hexagons, circles or custom silhouettes for avatars, galleries and hero images.
Create angled, beveled or wave-like edges between page sections for a modern, dynamic layout.
Design unique buttons, badges, cards and navigation elements that break out of the rectangle.
Animate clip-path with CSS transitions to build slick reveal, hover and loading effects.
Percentage-based shapes scale fluidly, so your clipping stays consistent across screen sizes.
Experiment with shapes visually and grab production-ready code in seconds for any design idea.
Frequently Asked Questions
What is the CSS clip-path property?
clip-path defines a region of an element that is visible; everything outside that region is clipped away. It supports basic shapes like circle(), ellipse() and inset(), as well as custom polygon() paths.
How do I edit a polygon shape?
Select the Polygon tab or a polygon preset, then drag the points on the live preview. Double-click a point to delete it, or click the small dot on any edge to insert a new point.
Do I need the -webkit- prefix?
Modern browsers support the unprefixed clip-path property, but adding -webkit-clip-path improves compatibility with older Safari and Chrome versions. You can toggle it on or off in the output options.
Can I export to Tailwind CSS?
Yes. Switch the output format to Tailwind and the tool produces an arbitrary value like [clip-path:polygon(...)] that you can paste directly into a class attribute.
Why does my shape look different on a non-square element?
clip-path percentages are relative to the element's bounding box. Use the width and height sliders in the preview to test how your shape behaves at different aspect ratios.
Is this tool free and private?
Yes. The generator is completely free, requires no sign-up, and runs entirely in your browser, so uploaded preview images never leave your device.
Whether you are masking an image, carving an angled section divider, or animating a reveal effect, the CSS Clip-Path Generator lets you design shapes visually and ship clean code instantly. Drag a few points, pick CSS or Tailwind, and bring non-rectangular layouts to life without the guesswork.