v135 · css

CSS shape() function

shape() allows responsive free-form shapes in clip-path.

concepts

  1. shape() presets

    Composing clip-path: shape() geometry with semantic command names — from, line to, curve, arc, close. Pick a preset, watch the clip animate.

  2. SVG path → shape() converter

    Paste any SVG path and watch it translate into a semantic shape() string. The side-by-side render confirms the geometry matches — the Chrome blog calls this the killer reason for the function.

  3. Shape animation morph

    Click morph to interpolate between two shape() definitions using nothing but CSS transitions. Adjust easing and duration to see how the engine blends move/line/arc commands — no SVG SMIL, no JS geometry.

  4. Text wrap flow

    Use shape-outside: shape(...) to wrap an article paragraph around a non-rectangular float — diamond, arch, notch — defined entirely in CSS. The text follows the contour at responsive sizes.

  5. Clip-path Gallery

    Nine hand-crafted clip-path: shape(…) definitions — arrows, hexagons, stars, speech bubbles, chevrons, tabs, shields, and more. Click any tile to open a path inspector showing the exact commands and a large preview.

  6. Polygon Art

    Click the grid canvas to add vertices, drag them to reshape, delete to simplify. Every edit generates a live clip-path: shape(from … line to … close) declaration applied to a real element — copy the CSS to your project.

why it shipped

shape() allows responsive free-form shapes in clip-path.

references