demo · v134
shape() vs path()
clip-path: path() accepts an SVG path string with hard-coded pixel coordinates. clip-path: shape() (Chrome 134) uses CSS-friendly syntax with relative units and named commands. Both produce the same visual — but shape() is far easier to read, write, and maintain. Pick a preset and compare the two syntaxes side-by-side.
shape(): ?
path(): ?
shape() — Chrome 134+
?
path() — all browsers
?
| Feature | shape() | path() |
|---|---|---|
| Relative units (%, em) | ✓ yes | ✗ no (px only) |
| Responsive to container size | ✓ yes | ✗ no |
| Animatable | ✓ yes (Chrome 135+) | ✓ yes (limited) |
| CSS variable support | ✓ yes | ✗ no |
| Browser support | Chrome 134+ only | ✓ all modern browsers |
| SVG-compatible syntax | ✗ no | ✓ yes (SVG path data) |
see also
- CSS shape() function — feature index
- shape() playground
- Path builder
- ChromeStatus entry