TL
Tool Lab
💰Donate
💰Donate

CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

.element {
  clip-path: circle(40% at 50% 50%);
}

About This Tool

The CSS Clip-Path Generator creates clip-path values for four shape types: circle(), ellipse(), inset(), and polygon(). Clip-path defines the visible region of an element — anything outside the shape is hidden.

This enables creative layouts, image masks, and hero section shapes without needing SVG files. All parameters update the live preview in real time.

How to Use

  1. Select a shape type: circle, ellipse, inset, or polygon.
  2. Adjust the sliders to configure the shape parameters.
  3. For polygons, pick a preset shape from the list.
  4. Watch the live preview update as you adjust settings.
  5. Click Copy to copy the CSS to your clipboard.

Use Cases

Hero sections use diagonal or curved clip-path shapes as visual dividers. Profile images use circle() for circular avatars. Image grids use polygon shapes for creative layouts. Button hover effects use clip-path animations to reveal shapes.

FAQ

  • Does clip-path affect the clickable area? — Yes. Clipped-out regions are not clickable. Keep this in mind when applying clip-path to interactive elements.
  • Can I animate clip-path? — Yes. Clip-path can be transitioned and animated between two polygon shapes with the same number of points.
  • Is clip-path supported in all browsers? — Yes, with full support in all modern browsers. The shapes in this tool all use the well-supported forms.