Clip Path Generator

Clip-Path Generator

Advanced CSS clip-path designer & exporter

Visual Editor

4 points

Shape Type

Visual Editor

Control Points

Shape Name

Live Preview

Rectangle

Upload Custom Image

Or Enter Image URL

Sample Images

Preview

Clip Path Value

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

Animation Preview

Code Export

polygon

Export Format

CSS Framework

Options

Vendor Prefixes

Include -webkit- for browser support

Animation

Add smooth transition effects

Generated Code

.rectangle {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

Quick Copy

Control Points

Lines of Code