CSS shape() Function: Responsive clip-path Shapes
Path shapes without SVG clip paths
Creating non-rectangular clip paths used to mean SVG <clipPath> elements or path() with fixed pixel coordinates that break as soon as the element resizes. shape() brings path-style drawing to CSS using percentage units and responsive coordinates.
The old hack vs the modern fix
View demo/* path() uses absolute px — not responsive */
.hero {
clip-path: path(
"M 0 0 L 800 0 L 800 360 Q 400 420 0 360 Z"
);
/* Breaks on resize */
}.hero {
clip-path: shape(
from 0% 0%,
line to 100% 0%,
line to 100% 80%,
curve to 0% 80% with 50% 105%,
close
);
}Shape function browser support
135+
148+
18.4+
135+Live demo
Why the modern way wins
Responsive units
shape() accepts percentages, calc(), and any CSS length. The shape scales with the element automatically.
No SVG required
No inline SVG, no <clipPath> element, no hidden SVG containers. The shape lives in CSS where it belongs.
Animatable
Unlike SVG clip paths, shape() supports CSS transitions and animations between compatible shapes.
- Old Approach
- path() or SVG
- Fixed pixel values
- Modern Approach
- shape()
- Responsive, animatable
- Units
- %, calc(), rem
- vs px-only path()
How it works
The clip-path: path() function takes SVG path data, which uses absolute pixel coordinates. A path drawn for an 800px-wide element looks wrong at any other width. The workaround was SVG <clipPath> elements with clipPathUnits="objectBoundingBox" and 0–1 fractional coordinates. A complex setup hidden in HTML.
shape() brings path drawing commands directly into CSS with support for responsive units. from 0% 0% sets the starting point, line to 100% 0% draws a line, curve to … with <c1> draws a quadratic Bézier, with <c1> / <c2> draws a cubic one, and close closes the path. Every coordinate can use percentages, vw, rem, or calc().
Chrome 135, Firefox 148, Safari 18.4, and Edge 135 all support this. Baseline Newly available in 2026. This is an Interop 2026 focus area.