CSS shape() function

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 135)
Intent stage: None

Breaking change: No
Enterprise impact: None
Chromium flag: CSSShapeFunction
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-shapes/shape-functions?label=master&label=experimental&aligned&q=shape (anything beginning with shape-) https://wpt.fyi/results/css/css-masking/clip-path?label=master&label=experimental&aligned&q=shape and https://wpt.fyi/results/css/css-masking/clip-path/animations?label=master&label=experimental&aligned&q=shape (clip-path-shape-*)

Summary

shape() allows responsive free-form shapes in clip-path. The author can define a series of verbs, roughly equivalent to the verbs in path(), but where the verbs accept responsive units (e.g. % or vw), as well as any CSS values such as custom properties or rather than pixel-values. See https://drafts.csswg.org/css-shapes-2/#shape-function

Standards & signals

Specification: https://drafts.csswg.org/css-shapes-2/#shape-function
Firefox: No signal
Safari: Positive — Safari has already implemented this, available in STP.
Web developers: Positive — See citations: https://jamesmcgrath.net/scaling-svg-clippath/ https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/ https://stackoverflow.com/questions/29495919/how-to-apply-clippath-to-a-div-with-the-clippath-position-being-relative-to-the https://stackoverflow.com/questions/31210466/convert-svg-path-data-to-0-1-range-to-use-as-clippath-with-objectboundingbox https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive
Tracking bug: https://issues.chromium.org/issues/40829059

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=shape
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20shape()%20function
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20shape()%20function
Baseline status: https://webstatus.dev/?q=CSS%20shape()%20function

View on chromestatus.com