v149 · CSS

CSS shape() function

Draw arbitrary shapes directly in CSS using SVG-like path commands — for clip-path and shape-outside — with no SVG markup or JavaScript required.

concepts

  1. Shape Sculptor

    Pick from a palette of preset shapes and watch the shape() syntax build live. See how arcs, curves, and lines combine in CSS alone — and compare the syntax to the equivalent polygon().

  2. Text Wrap Flow

    Use shape-outside: shape(…) to wrap a paragraph around a complex non-rectangular float. The text follows the contour of a custom shape defined entirely in CSS.

  3. Shape Animation Morph

    Pick two shapes and morph between them using only CSS transition on clip-path: shape(…). Adjust duration and easing to see how the browser interpolates path commands — no JavaScript geometry, no SVG SMIL.

  4. Clip Gallery

    Eight shapes — hexagon, arrow, diamond, rounded star, speech bubble, chevron, wave, and cross — all built with clip-path: shape() using percentage units. Click any shape to reveal its exact shape() code, and resize the viewport to confirm they scale correctly.

  5. Responsive Cutouts

    Six shapes (hexagon, arrow, diamond, chevron, star, shield) all using clip-path: shape() with percentage coordinates — resize the viewport to confirm each shape scales perfectly. An inline code panel explains the key advantage over path(): percentage units make the shape inherently responsive without any JavaScript recalculation.

  6. Compatibility Lab

    Probes shape() for clip-path and shape-outside with CSS.supports(), runs live shape injection to confirm rendering, and shows the full fallback hierarchy: shape() → polygon() → path() using @supports guards.

  7. Authoring Studio

    Build a shape() path interactively — add from, line to, curve to, arc to, and close commands, load preset shapes, choose clip-path or shape-outside, and copy the generated declaration. Each command is editable live with real-time preview.

why it shipped

clip-path: path() already accepted SVG path strings, but only as absolute pixel coordinates — no responsiveness, no relative sizing. clip-path: polygon() supports % units but only straight lines. The new shape() function bridges the gap: it uses the same move/line/curve/arc command vocabulary as SVG paths, but accepts percentage and viewport units so the shape scales with the element. It brings the same capability to shape-outside, letting float shapes be as complex as needed while staying responsive.

references