Newly availableUseful when shape() adds emphasis or visual refinement without becoming necessary for understanding content.
Effects Newly available

shape()

The shape() CSS function creates shapes with a series of commands like line, move, and curve. It can be used with clip-path and shape-outside.

Effects

Overview

The shape() CSS function creates shapes with a series of commands like line, move, and curve. It can be used with clip-path and shape-outside.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.basic-shape.shape
135
135
148
18.4
135
18.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.blob {
  clip-path: shape(
    from 50% 0%,
    curve to 100% 50% with 100% 0%,
    curve to 50% 100% with 100% 100%,
    curve to 0% 50% with 0% 100%,
    close
  );
}

Live demo

blobshape

CSS blobshape demo.

PreviewFullscreen

diamond

CSS diamond demo.

PreviewFullscreen

arrowshape

CSS arrowshape demo.

PreviewFullscreen

Use cases

  • Decorative enhancement

    Use shape() to add depth, masking, blending, or special treatment to supporting visuals.

  • Brand expression

    Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.

Cautions

  • Heavy effects can hurt performance or readability on lower-end devices.
  • Do not use visual effects as the only way to communicate meaning or state.

Accessibility

  • Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
  • Visual polish should never reduce content legibility.

Related links

Powered by web-features