CSS shape() Visual Editor

CSS Shapes Level 2

Generate beautiful responsive clip-path: shape() paths. Drag and drop interactive anchor and control points in real-time without guessing pixels.

Interactive Preview & Drawing

Double-click anywhere on the grid to add a point!

Background:
0,0 100%,0 0,100% 100%,100%
Cursor: -- , -- Commands: 0

shape() Animation Module

In CSS, you can animate two clip-path: shape() paths as long as they have the same command structure. Save a reference state ("State A"), modify your shape, and trigger the transition!

State A: Not saved State B: Not saved

Shape Presets

Click on a preset to use it as a starting point:

Command Structure

Convert to:
px

Generated CSS shape() Code

clip-path: shape(...);

How it works:

The CSS Level 2 shape() function allows drawing complex clip paths using absolute or relative coordinates in pixels or percentages. It natively handles Bézier curves (curve) and elliptical arcs (arc).