✂️

CSS Clip Path Generator

Create complex shapes and clipping masks using CSS clip-path property with visual preview and custom path editing.

Clip Path Settings

Shape Presets
Select a shape preset to apply predefined clip-path values
Enter a custom CSS clip-path value using circle, ellipse, polygon, or path functions
Examples: circle(50%), polygon(50% 0%, 0% 100%, 100% 100%), ellipse(30% 50% at 50% 50%)
100px300px500px
100px300px500px

Live Preview

Circle Clip Path Preview
Clip path updated: circle shape applied

Generated CSS

Complete CSS Code:
.clip-path-element {
  width: 300px;
  height: 300px;
  background-color: #3b82f6;
  clip-path: circle(50% at 50% 50%);
  transition: clip-path 0.3s ease;
}

.clip-path-element:hover {
  clip-path: circle(55% at 55% 55%);
}

Clip Path Value

Use this clip-path value directly in your CSS
clip-path: circle(50% at 50% 50%);

HTML Structure

Use this HTML structure with the generated CSS
<div class="clip-path-element"></div>